Menu
Can soneone give me a hint as to why my element(id="stuff") won't show?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>blah</title>
<style type="text/css" media="screen, print, projection">
body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
img#background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin:0;
padding:0;
}
#stuff{
background: black;
height: 50px;
width: 100px;
z-index: 2;
}
</style>
</head>
<body>
<img id="background" src="greenbackground.png" alt="Background Image" />
<div id="stuff"><p>stuff</p></div>
</body>
</html>
909
Make sure the image path is set correctly in the background-image url. Once you have made sure that your CSS file is linked correctly, also check that the image itself is set correctly. Again, you will want to open your code inspector in the browser to check.
I recommend moving your css from the inline scope. Assuming that your . png file actually exists, try setting the background size and repeat tags. If that doesn't work, try checking in your browser's developer tools for the response codes and making sure that the url is correct.
You have to set the background-repeat property to no-repeat . This will ensure that the background-image is not repeated. The image will only be shown once. To fit the image into each cell you can use background-size: cover and background-position: center .
The background-image CSS property sets one or more background images on an element.
z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). Adding the position line to #stuff will fix this.
#stuff{
position:relative;
background: black;
height: 50px;
width: 100px;
z-index: 2;
}
Give it a position other than static:
#stuff{
background: black;
height: 50px;
width: 100px;
z-index: 2;
position:relative;
}
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
