Menu
I'm working on a webpage (I'm a newb of course) and the background image won't show up in the div. I tried both background-image and background and they both will not work... heres the code
if anyone can help that would be great!!
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {background-color:gray;}
</style>
</head>
<body>
<div style="background-image: url('/ximages/websiteheader1.png');height:200px;width:1200px;">
</div>
</body>
</html>
878
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.
One way is to use the background-image CSS property. This property applies one or more background images to an element, like a <div> , as the documentation explains. Use it for aesthetic reasons, such as adding a textured background to your webpage.
I recommend moving your css from the inline scope. Assuming that your .png file actually exists, try setting the background size and repeat tags.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {background-color:gray;}
#mydiv {
background-image: url('/ximages/websiteheader1.png');
background-repeat:no-repeat;
background-size:contain;
height:200px;width:1200px;
}
</style>
</head>
<body>
<div id="mydiv">
</div>
</body>
</html>
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.
Hope this helps!
185
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
