I want to fill my page with a background image and have the text aligned in place with that background. With the below code, the background image loads at the top of the page, and the text goes under it. I know I can use the "background: " function, but the way it is done in my below code allows for automatic resizing, regardless of browser size (i.e., mobile devices have small browser sizes). So, I just want the background image to go behind the text.\[code\]<html><head><title>Title</title> <style>img.bg{ min-height: 100%; min-width; 781; width: 100%; height: auto; top: 0; left: 0; z-index: -1;}@media screen and (max-width: 781){ img.bg { left: 50%; margin-left: -390.5; }}#container { position: relative; width: 781; margin: 50 px auto; height: 758; border: 1px solid black}#left{ position: relative; left: 1.280409731113956%; top: 14.51187335092348%; padding-top: 10px; padding-left: 10px; padding-right: 10px; width: 50%; height: 50%; color: #FFFFFF; position: relative;} p{ font: 14px Georgia;}</style></head>\[/code\]HTML \[code\]<img class="bg" src="http://stackoverflow.com/questions/11543938/background.jpg"><div id="container"><div id="left"> <p> Text </p></div></div></body></html>\[/code\]
How to make background image go in the “background” using CSS/HTML
- Thread starter hsrpdi
- Start date