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.
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?
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.