[tomr2006]

Hey guys,

Im fairly damn new to CSS and have limited knowledge of HTML in the first place. 90% of the web design I’ve done in the last 2 years has been based in flash. However I’ve recently become aware of the importance of a sound understanding of html/CSS in order to even begin to think of myself as ‘competent’ in coding etc.

Anyway, moving on. I was messing around with a design I thought would be probably mostly coded with Actionscript, however I was wondering if/how it is possible to have such a background (as the one posted below), where it consists of a standard ‘base’ pattern, repeating in both directions over the entire page, but also having a large ‘bar’ running horizontally through the middle (the blue area basically) where in which the content lies.



Why is it, that I couldn’t simply have the pattern as the background:

body {
background-colour: #fff url(images/gridbg.jpg);
margin: 0;
padding: 0;
text-align: center;
font: 11px Arial, Tahoma, sans-serif;
}


…and the bar like so:

#bar {
background: url(images/barbg.jpg);
width: 100%;
margin: 0 auto;
padding: 0;
}

Notice how the ‘bar’ has to contain the flash content in the middle.

I understand that’s a pretty poor explanation of what is I’m trying to achieve, but also understand I don’t know how to explain myself due to not having the knowledge. Bit of a catch 22 if you like. Anyway, help very much appreciated.. Abuse simply dismissed: D

[mx]

You can do that easily.

Just put your pattern on the body and repeat;
Put a div inside with 100% width and repeat the background on the y axis.
You'll need to give the div a height and you'll have fun trying to centre the bar vertically on the page.

[herkalees]

body {
background: url(path/to/black-image.gif) repeat left top;
}
#container {
background: url(path/to/tall-vertical-blue-image.gif) repeat-x left top;
margin: 50px 0;
}

There is no need to declare 'width:100%;' on a block-level element.

[tomr2006]

Thanks guys, Ill see what I can manage..

edit: Oh, right...

[tomr2006]

Well that was easily fixed -- thanks.

[herkalees]

Anytime.