Background Image

[mwdewitt]

How do I place this background image behind the header and the footer, repeating it on the “X” and “Y” axis? I already have written in my CSS…

body {

font-size: 16px;

font-family: Myriad Pro, Arial, Helvetica, sans-serif;

color: #000000;

background-color: #FFFFFF;

background-image: url(images/header-bg.png);

background-repeat: repeat-x;

background-position: center top;

}

…which seems to make it so I can not put another background image on my page. Thank you in advance for any help you can give me!

[zackw]

body {

font-size: 16px;

font-family: Myriad Pro, Arial, Helvetica, sans-serif;

color: #000;

background:#fff url(images/header-bg.png) repeat;

}

or if you want it just on the header and footer

#header, #footer {

background:#fff url(images/header-bg.png) repeat;

}

if you apply it to the body u can still have other background images on the page but each element can only have 1 bg image, unless your using css3 but that’s prolly above your current css knowledge

[mwdewitt]

Okay, I did something to that effect. Here is the CSS code for the body…

body {

font-size: 16px;

font-family: Myriad Pro, Arial, Helvetica, sans-serif;

color: #000000;

background-color: #FFFFFF;

background-image: url(images/body-bg.png);

background-repeat: repeat;

}

…and here is the CSS code for the header…

#header {

background-color: #000000;

background-image: url(images/header-bg.png);

background-repeat: repeat-x;

background-position: center top;

}

…now, how do I get my website to recognize the #header CSS code? You can see what is happening to my website. There is currently no header.

[zackw]

change #header in your style sheet to #top-bar since that is what you named your div

[mwdewitt]

It still does not pick up the header-bg and it is only spanning 960 pixels, even if I change it to #top-bar. Again, you can visit my website to see what is happening now. Thank you, so far!

[zackw]

its only spanning 960px because its inside your pagewrap.. if you want the bg to expand the whole way you must take it out of the pagewrap, this will however make your content inside the header go outside the page wrap as well so you will need to include one inside the header

Content Here

im not sure why it isn’t picking up your bg image, check its spelling and make sure you’ve got the correct path

P.S. if your gonna use another page-wrap inside your the header that means you will have 2 of them on the page so you should change them from an id to a class

[zackw]

it looks like your bg-header.png image is just a 180px tall black img, maybe you saved it down improperly from photoshop… download firebug for firefox its a really helpful web development tool, especially for de-bugging problems

[mwdewitt]

I did it! Look at this shmexiness!

[zackw]

:)

[mwdewitt]

Yeah, the header-bg.png file is only 1 pixel wide, repeated along the x-axis, and along the top. It takes less time to load than having a big, complicated header. I am so happy. I think I am finally done with this website.

[zackw]

yup thats the proper way to do it, but really its just 2 flat colors that you could have achieved with css without even having to use an image – but the way you did it is fine

[mwdewitt]

Actually, if you notice, there is a gradient at the bottom of the header and at the top of the footer, giving the impression that the body-bg is behind it. I do not know how to achieve that with CSS.

[mcguiver178]

this is a big help for me man…

use it in the future: http://www.colorzilla.com/gradient-editor/

[Author]

Posts