September 21, 201213 yr Hi Everyone Apologies for the simple question - I've been trying various solutions on the internet and don't seem to be getting anwhere fast. I'm relatively new to using CSS, but PHP scripting and HTML are generally fine for me. I'm building a website and all I want to do is use an image for a background, and then add another image dead center on screen on top of the background. The background image is fine, adding another image over the top of that is fine, but when I style the inner image it always stays locked in the top left corner. The image I need to fix is under-cons.jpg HTML used is as follows: <html> <head> <title>Coming Soon!...</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="bg"> <img id="bg" src="titanium-texture2.jpg" /> <img src="under-cons.jpg" /> </div> </body> </html> CSS used is as follows: body{margin: 0;padding: 0} #bg {position:fixed; width:100%; height:100%} #bg img {position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; min-width:50%; min-height:50%} Thanks in advance for your help! Edited September 21, 201213 yr by Renaissance-Design Use the formatting tools provided for your code.
September 21, 201213 yr Hi, First of all, you have two elements using the same ID (bg). This isn't good. ID's should be unique and used only once on your page. If you want them to have the same name for whatever reason, you should use a class. e.g. <img class="bg" /> then reference the class in CSS like .bg { }. With regards to your code, the reason the inner image is staying locked in to the corner is because the CSS is telling it to. Try something like this: <div id="container"> <img id="bg" src="titanium-texture2.jpg" /> <img id="inner" src="under-cons.jpg" /> </div> <style> body{margin: 0;padding: 0} #bg {position:fixed; width:100%; height:100%} #inner {position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; min-width:50%; min-height:50%} </style> Lyndsey.
Create an account or sign in to comment