March 10, 201016 yr what's going wrong here? www dot cashdoodle dot com I have a background image in my header "greyspacer.png" this is the lighter grey box that is obscuring the majority of my page. I want it to show centred behind my all my content including my logo images, leaving the darker grey as a background colour. I'm very new to web design, so please try and avoid one line comments like "use a div". thanks
March 10, 201016 yr The image greyspacer1.png is position: fixed so you need to give it a z-index to place it behind other content instead of over the top:- <img src="http://cashdoodle.com/images/greyspacer1.png" width="900" height="3000" style="position:fixed; bottom:0; margin-left: auto; margin-right: auto; z-index: -1;" alt="" /> Note that the code above should be after the <body> tag, at present it is just before. Also note that you didn't close the style tag with a final " and the img tag should be closed with /> instead of img/> This corrects the display of the gray image but I think more needs to be done, and I would have coded it as a background image instead of a position: fixed image. When you save your html file, save with Encoding ANSI and not UTF-8 as it is producing strange characters in my Firefox at the top left of the window (visible to me after the edits above).
March 10, 201016 yr Author The image greyspacer1.png is position: fixed so you need to give it a z-index to place it behind other content instead of over the top:- <img src="http://cashdoodle.com/images/greyspacer1.png" width="900" height="3000" style="position:fixed; bottom:0; margin-left: auto; margin-right: auto; z-index: -1;" alt="" /> Note that the code above should be after the <body> tag, at present it is just before. Also note that you didn't close the style tag with a final " and the img tag should be closed with /> instead of img/> This corrects the display of the gray image but I think more needs to be done, and I would have coded it as a background image instead of a position: fixed image. When you save your html file, save with Encoding ANSI and not UTF-8 as it is producing strange characters in my Firefox at the top left of the window (visible to me after the edits above). Thanks for that. It mostly works, but the image doesn't centre. Any idea how to do this? I thought setting the left and right margins to auto would sort that?
March 10, 201016 yr This should center it: <img src="images/greyspacer1.png" width="900" height="3000" style="position:absolute; bottom:0; left: 50%; margin-left: -450px; z-index: -1;" alt="" /> but I'm only offering you a fix as I wouldn't code the page like you have! Edit even better, scrap the img code in the html file and edit the css:- #wrapper { background: url(images/greyspacer1.png) repeat; width: 90em; margin: 0 auto; margin-top: 3em; margin-bottom: 3em; overflow: hidden; }
Create an account or sign in to comment