How do I put an image on top of an image without using absolute positioning?


Tags: html,css

Problem :

Basically, I have some nice navigation button .png's given to me from a friend and a header/banner.jpg. I want to put these .png's on top of the .jpg banner. The problem is that I'm using a css rollover function (for the navigation buttons) that requires me to use position: relative for the divs that contain the individual navigation buttons. Otherwise the rollover function gets hairy in Opera. How would I be able to accomplish this?

Here's some code for the css (for the navigation buttons):

.cssnavabout    { background: url(navigation/about_on_over.png) no-repeat; white-space: nowrap; display: block; height: auto; width: auto; float: left; position:absolute; top: 55%; left: 50% }
.cssnavabout a   { display: block; color: #000000; width: auto; height: auto; display: block; float: left; color: black; text-decoration: none; }
.cssnavabout img { width: auto; height: auto; display: inline; margin: 0px; border-style:none }
.cssnavabout a:hover img { visibility:hidden }

And the HTML partition (for the navigation buttons):

<div id="csswrapper">
 <div class="cssnavabout">
<a href="about.html"><img src="navigation/about_on.png" width=100 height=50 /></a>
</div>

Heres the CSS for the header/banner:

#header { width: 1024px; height: 109px; position: relative; margin:0px; background-color:#FFFFFF; }

And the HTML for the banner:

<div id="header">
<img src="images/banner_about.jpg" width="100%" height="109" /> </div>

I'm sure this is easily solvable. Sorry, this is my first website.



Solution :

How do I put an image on top of an image without using absolute positioning?

Like so...

<div style="background: url(image.png) no-repeat">
    <img src="image2.png" alt="" />
</div>

    CSS Howto..

    How to align div blocks to be aligned in grid?

    How to use CSS selector to find link by text

    How to do Hanging Punctuation in HTML / CSS

    How to float all child divs to center inside a parent div?

    How to conditionally render CSS and JavaScript inside head element of an HTML

    Using CSS alone, how can you have a Border-bottom gradient from Right to Left?

    How can I exclude some images from being preloaded

    How I can add highlight effect on outside the area of selection with CSS?

    How to generate the following control using html and css

    How to Make Certain Phrases Appear on One Line Regardless of Screen Size

    How to prevent HTML Email from having quoted printable when sending with C# using System.Net.Mail.MaiMessage

    How can I vertically align this navigation bar?

    How to remove shadow from slider backround using Html/Css?

    Captions not showing correctly when using Anything Slider

    How to reposition my jQuery popup?

    How to select attribute value for a selected element with wombat

    jQuery - How to adjust CSS filter (blur)?

    How to make div width almost 100%

    How to make pure css floating tooltips (absolutely positioned span) dynamically resize to accommodate text

    How to make a grid of interactive elements?

    How to make horizontal lines sit beside circle bullets using CSS

    CSS flex, how to display one item on first line and two on the next line

    How can I make a display:flex container expand horizontally with its wrapped contents?

    How can I include a CSS stylesheet in an XSL document for Internet Explorer?

    How to Center Logo in Responsive Header [closed]

    How did Blizzard achieve the layered cockpit view for the Starcraft II website?

    jQuery Show/Hide - CSS display values are affecting my layout

    css/html, how to scale and center a logo image

    How to force wrapper div to keep its optimal width according to its children

    How to display 20 columns in html design