Menu
How do I get "mymessage.gif" to show over "bread_wine.jpg".
mymessage.gif has a transparent background.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>overlap images</title>
<style type="text/css">
<!--
#navbar {
font-size: 18px;
font-weight: bold;
text-align: center;
}
#thebigimage {
background-image: url(bread_wine.jpg);
height: 548px;
width: 731px;
margin-right: auto;
margin-left: auto;
}
#overlapthis {
background-image: url(mymessage.gif);
}
-->
</style>
</head>
<body>
<div id="navbar">this is the nav bar</div>
<div id="thebigimage">
<div id="overlapthis"></div>
</div>
</body>
</html>
790
We're applying a negative right margin on a floated left element that allows content to overlap. -100% is equal to the width of the container so it shifts the image to the left and allows the bottom image to render beneath it as if it's not in the DOM. Codepen here: HTML.
CSS allows you to add multiple background images for an element, through the background-image property.
Using CSS Z-Index property developer can stack elements onto one another. Z-Index can have a positive or a negative value. NOTE − If elements that overlap do not have z-index specified then that element will show up that is mentioned last in document.
#overlapthis {
background-image:url("mymessage.gif");
height:100px;
left:50px; /* play around with this */
position:absolute;
top:90px; /* and play around with this */
width:500px;
}
#thebigimage {
background-image:url("bread_wine.jpg");
height:548px;
margin-left:auto;
margin-right:auto;
position:relative; /* and this has to be relative */
width:731px;
}
Try
#overlapthis {
position: absolute;
top: ??px;
left: ??px;
z-index: 1;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
