How do I place an image on top of an already existing background image in the very top left of the web page, without any margins or padding? I can't have two background images in the same div, correct? So how do I stack the one image that i want in the top left over the background image? Thanks in advance Kyle
Float a foreground image. Assuming the bg image is on the div element, <div> <img src="some.png" alt="whatever" /> <p> whatever other text content.</p> </div> ========= img { float: left; } Code (markup): cheers, gary
Ok I got that to work, however it moves my entire content to the right the amount of pixels the image's width is. Is there a way for the top-left image not to affect the content? Here's how the code looks: <body> <img class="splat" src="/videos/images/splat-corner.png" alt="Paintball Splat"> <div id="wrap"> HTML: img.splat { float: left; } Code (markup):
Sorry for the confusion. Here's an image of what I want is showing up... In IE http://img156.imageshack.us/my.php?image=dphelpmg0.jpg In Firefox http://img295.imageshack.us/my.php?image=dphelp2ia3.jpg Using this code: img.splat { float: left; } Code (markup): HTML: <body> <img class="splat" src="/videos/images/splat-corner.png" alt="Paintball Splat"> <div id="content"> Code (markup): I want the content to be centered like it should be, but the top left image on top of the background image (it's a transparent .png file). Can this be done so it works in all browsers?