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..

    CSS Hover Events, How to Trigger a Parent's Effect

    How to keep css style for only one element

    How to change link color when using jquery mouseover

    How to indent items of a sublist using css and html in wordpress

    How can i make it through using bootstrap grid?

    How can I make it so that CSS uses a class only if another is not present on an element?

    How to create these boxes with CSS and HTML [closed]

    How to include library files (css/js) in angular-fullstack based app

    How to combine components in HTML header

    How to delete css right or bottom on drag

    How to debug a website template which is very slow (client side)?

    How to change the style of an active menu with php + css

    How to use jquery .css in a javascript variable

    how to copy font-family from a webpage

    How can I avoid a “Flash of Unstyled Content” using fixed-width cells in CSS Tables?

    Meteor: how to style useraccounts

    How to center text in my div

    How to enable CDN CSS in Brackets, Chrome?

    How can I prevent scroll bars from being hidden for OS X trackpad users in WebKit/Blink?

    How to Change blue background selection color from image using css

    How to make div disappear when clicking outside?

    How do you deal with the designing issues of a website?

    How to make an image fully flexible in terms of display size?

    How can I make each section fit within the li box?

    How to reflect updates to CSS at runtime in Visual Studio 2012?

    How can I use Perl to get a list of CSS elements with a color or background color attribute?

    CSS: How to select all rel atributes

    How to make space between menu items in CSS/HTML

    How do I create page transitions for my website

    How to have constants in Flex CSS files