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 do I make a hover over only take up a portion of an image as seen on gamlinwhiskeyhouse.com? [closed]

    How animate stacking divs in javascript/css?

    How apply css to div in catch statement using jquery

    How can I convert an svg-glyph into a path?

    Unicode character, down triangle, shows up as strange text

    How to resize image automatically on browser width resize but keep same height?

    How to go about containing a float within a div with variable space

    Horizontal scrolling doesn't show up when I resize browser

    How to upgrade web project with latest fancy Bootstrap & SASS

    How to make background image with aspect ratio in html and css [closed]

    links are showing up on each line, instead of inline

    How to change the background color of a line of user input in a textarea?

    How to position two divs on the absolute front of a page, but with one over the other? CSS

    How to align vertical elements as horizontal elements and shift to right side of the screen using CSS?

    How to size a div box in CSS so text is centered regardless of length

    How to use bootstrap-theme.css with bootstrap 3?

    show div border when link is clicked

    How to let Fancybox Next and Previous button stay visible

    How to do proportionate image gallery supporting both horizontal and vertical aspects?

    Symfony3 - how can I add a photo using Symfony

    How to correctly set the column widths on my HTML table?

    How to hide ads with media queries?

    How to scroll with large pages with jQuery onepage-scroll plugin?

    CSS: 2-column table, how to make one column as small as possible but no wrap and the other as big as possible?

    How to crop and design these images like this using html and css? [closed]

    How to not display css padding when span element is empty

    How to fix angular-strap css

    How to get the text in the custom dialog to be centered vertically

    How to make all the rows of a table the same height as the biggest one

    How to create multiple columns in a div