Create background in CSS

axer

Hi,

Anyone know how I could implement the following background using CSS or is it possible.

Here is an image of the background:
http://i128.photobucket.com/albums/p161/axer2/fullwebsite.jpg

I cannot do it with vertical or horizontal background repeats because horizontally the colour changes from blue to white to red/maroon and vertically because there is a shadow at the edges of the white main content part.

Anyone got any ideas?

Should I give up trying to reproduce it?

Thanks for any help/advice,
Noel.

Gordon

You could split it into sections. (That drop shadow effect is nice but such a bitch to get with backgrounds)

Firstly you can have a horizontal repeat of blue and a white stripe, the background colour for the page is then maroon. So that takes care of the general background. Then for the shadow you would need to split it into the header and the content of the container.

The header would be a 200 pixel high (or whatever the height is of the blue and white stripe) with
blue-shadow-white-shadow-blue
whiteline-shadow-white-shadow-whiteline

And for the rest
make a container div with one or two pixels high of:
maroon-shadow-white-shadow-maroon
and use that as a background for the container div - repeated vertically.

That should do the trick I reckon, although someone else may point out a better way as right now with what I mentioned - it forces you to separate the top bit from the rest of it.

I've attached an image of what I mean. The maroon colour for the main part of the background will be taken from the bgcolor attribute.

Incidentally imo it's good practice to make repeating patterns as small as possible for load speed, hence I would recommend you make the "BG repeat slice" 1 pixel wide and the "content repeat slice" 1 pixel high, it's not necessary to make them 10 pixels or 50 pixels wide/high for example.

comer_97

i just started to redo my site and i have done something similar. check out www.redtomato.ie/css.html, view source to see how it works

I used http://www.brainjar.com/ it's a good site.

Gordon

comer_97 wrote:

i just started to redo my site and i have done something similar. check out www.redtomato.ie/css.html, view source to see how it works

I don't see any background there btw. On Firefox.

Serbian

It's actually remarkably easy to implement this background effect. The only thing you need to do is cut a 1px section of the design (lengthways). It will need to be very wide (a couple of thousand pixels at least). Just make sure the whitespace is in the centre of the 1px high image. Then use the following CSS:

body {
   background: #fff url(path/to/1px/image.png) repeat-y top center;
}

Then centre a div and set the width the same as the whitespace. If you are having difficulty with this, let me know and I'll put up a test page to show you what I mean.

Gordon

Presumably you need three images though Serb - one for the blue top colour, one for the white stripe, and one for the maroon?

comer_97

i don't use a background but what i have done using css has the same affect and it has a similar look to what the OP was looking for.

Gordon

comer_97 wrote:

i don't use a background but what i have done using css has the same affect and it has a similar look to what the OP was looking for.

uh? Am I looking at the wrong link or something?! It doesn't look anything like axer's image. Incidentally comer, do you not get confused when going back to edit your site's css there? All of the divs are named A1, A2, A3, etc, that would really confuse me if I had to do a few changes some time after originally making the site. I try to name my divs by their purpose or position so that when I look back at the css I can relate the two easily. One man's meat I guess..

Goodshape

Gordon wrote:

Presumably you need three images though Serb - one for the blue top colour, one for the white stripe, and one for the maroon?

You could do it with two.

One for the red (background), and one for the blue and white (overlayed in a header).

Would be an awful lot easier and more versatile if you were to forgo the gradient and just use solid colour. No need for images at all.

Serbian

Gordon wrote:

Presumably you need three images though Serb - one for the blue top colour, one for the white stripe, and one for the maroon?

Ah yeah, wasn't thinking straight. It would be fine if it was one colour :P. Well, you could do it with two images. Cut the background out lengthways so you get the blue, white and maroon stripe across the whole the page. Cut out the whitespace (including the shadow) and set it as the background of a centered div. The only possibly tricky part here would be setting the div to 100% high so the white runs the length of the page. You would also need to fill the edges of the main content with a black to transparent gradient so that the dropshadow can overlay both the blue and the red.

It's definitely doable anyway.

Goodshape

Serbian wrote:

The only possibly tricky part here would be setting the div to 100% high so the white runs the length of the page.

Red = 'background.png'
Blue, with white stripe = 'header.png'

body {
    background-image : url('background.png');
    background-repeat : repeat-y;
    background-position : top left;
}

#header {
    width : whatever;
    height : whatever;
    background-image : url('header.png');
    background-repeat : no-repeat;
    position : absolute;
    top : 0px;
    left : 0px;
}

Something like that is what I was thinking. Not sure what you meant by 'remove the whitespace', but for what I've done you'd just cut the original image in two. Although the red background image need only be 1px in height.

ken browder

comer_97 wrote:

i don't use a background but what i have done using css has the same affect and it has a similar look to what the OP was looking for.

Greetings.
Your drop shadow is exactly what I was looking for. Ahhh the Dublin link on the right.
could you send me the css code and html to be able to create a page like this?

Thanks,