I’ve searched this on here as well as on google and can’t seem to make it work. I’m trying to put images directly on top of another. This is for the menu of the site. I’ve tried using the z-index, which i believe I am using wrong. So I’m trying to simply set the one image as the background of the div.
here is my current code:
first the html:
<center>
<div id="menu1">
<a href="index.php"><img id="homebutton" src="./images/newmenu/homebutton1.png"></a>
<a href="register.php"><img id="registerbutton" src="./images/newmenu/registerbutton1.png"></a>
<a href='login.php'><img id="loginbutton" src="./images/newmenu/loginbutton1.png"></a>
<a href="about.php"><img id="aboutbutton" src="./images/newmenu/aboutbutton1.png"></a>
now the css:
div#menu1{
background-image: url('./images/newmenu/menubar.png');
}
The background image which is the solid red bar with gradient does not appear. Here is a screen shot of the page.
as you can see the buttons load but the background does not. If someone could please tell me what I’m doing wrong it would be greatly appreciated.
Your links have images in them (with the navigation text I assume). The background of those images is going to appear over your background image, so your background image will not be seen.
Have to change the question entirely upon discovering the cause.