Hey there!
I recently created a CSS image that covers the entire background of my website. However, when I added a picture in the HTML, it doesn't show up because it's being overlapped by the CSS background.
Check out my CSS code:
{
margin: 0;
padding: 0;
}
html, body, #bg, #bg table, #bg td, #cont {
height:100%;
width:100%;
overflow:hidden;
}
#bg {
position: relative;
}
#bg div {
height:200%;
left:-50%;
position:absolute;
top:-50%;
width:200%;
}
#bg td {
text-align:center;
vertical-align:middle;
}
#bg img {
margin:0 auto;
min-height:50%;
min-width:50%;
}
#cont {
position:absolute;
top:0;
left:0;
z-index:70;
overflow:auto;
}
.box {
margin: 0 auto;
width: 400px;
padding: 50px;
background: white;
padding-bottom:100px;
font: 14px/2.8 Georgia, Serif;
}
And here is the HTML code snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Full Page Background Image | CSS #1</title>
<div style="background: url (C:\Users\***\Desktop\site\picture.png; z-index:1">
<img src="C:\Users\*****\Desktop\site\picture.png" position:relative; left:-20px;/>
</div>
<style>
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
#page-wrap { position: relative; width: 400px; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }
p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px; }
</style>
</head>
<body>
<img src="images/bg.jpg" class="bg">
<div id="page-wrap">
text
</div>
</body>
</html>
If you have any suggestions, please let me know! Thank you ☺️