New to CSS. Help with BG image

[electrikALIEN]

Hello. I’m a long time designer with some background in HTML (mainly from the late 90s), but I’m pretty strong in it. However, I’m finally trying to jump on the "modern web design" bus and CSS looks like it should be the perfect place for me to dive into next.

Now to my problem. I’m developing my own website while learning CSS. So far the page only contains two elements: a background which scales proportionately width-wise and an alpha-transparent PNG which is page wrapping (centering) depending on the size of the browser window.

Currently my background is displaying OVER the PNG. I’ve tried z-index flags, but nothing is working. I’ve even tried to place the background image into the body tag, but I lose the scaling when i do that.

Anyways, I’m hoping someone can point out what I’m missing. Am I close to the solution or miles away? Thanks in advance! I’m loving this site.

Mockup: http://www.electricalienstudios.com/spec/site-design.jpg
Page in broken action: http://www.electricalienstudios.com/spec/index.html

[pab]

Hi,

you have to put your image in the css and not inline.

so you can do something like

body {
background-color:#fff;
font-family:Georgia,serif;
font-size:62.5%;
background:url(the path to your background) no-repeat; /* or what ever you want to do with it*/
background-position:fixed;
}

same applies for your other image for your div.

hope this helps. nice background image by the way.

pab

[electrikALIEN]

Thank you for the response.

I took what you recommended and I’m happy to see the images stacking in the right order now.

However, the new problem I’m running into is with the background image now in the BODY tag, I can’t seem to get it to scale with the width of the page. Now I do have the positioning working correctly, but now I will run into the problem of the sides of the image showing when the browser is too wide.

This may be a newb question… but can I call an element inside of an element? For example, can I give BACKGROUND properties elsewhere in the CSS other than the BODY tag? And how do I link this particular BACKGROUND to the BODY?

[tcindie]

Your best bet is to modify the bg image a bit so that either A) it will repeat seamlessly, or B) it has a gradient or something that transitions to a solid color, so if someone has an execptionally wide screen they would see the solid color on either side of the image. Then you can position the bg centered, so that those edges are only seen if the browser is too wide.

[electrikALIEN]

Thanks for all the helpful advice. I’ve decided to do just what you recommend and it’s working beautifully locally.

[tcindie]

Looks good here too. :)

[Author]

Posts