<div> not displaying background image

user_14263210 0
Viewed 67

In my css file, I have an id named "homehero", which displays a background image.

#homehero 
    {
        background-image: url("images/coast.jpg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

In my html file, I have a div that uses this id to display the image; however, the image does not appear whatsoever.

<div id="homehero"> <!-- Home Page Image -->
    <!-- <img src="images/coast.jpg" width="100%" height="100%" alt="A Sunny Coastline"> -->
    <!-- Old line of html that displayed the same image, but converted to css id. -->
</div> <!-- End of Home Page Image -->

The full html file can be found here.

The full css file can be found here.

Edit: The image is displayed when setting it as the background image for another element, it is only in this id where the issue occurs.

css image html
5 Answers

Please Put width and height width:100%; height:100vh;

#homehero 
    {
        background-image: url("images/coast.jpg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width:100%; 
        height:100vh;
    }
user_64684570

These are a few things I recommend you try:

  • Try setting the background size. (Instead of %, try setting it to px.) Most of the time, the background picture is applied, but because our div has no dimension, we are unable to view it.
  • Double-check that your picture file is located in the images folder.
  • Check your image's extension and make sure you're using the correct one in your code.
  • Use the dev tools to inspect the element and see whether the background property is being overridden by another CSS rule.

If none of the above methods work, try pasting the picture's real URL by copying the image address from the internet rather than providing a folder path. This method works 90% of the time.

user_169253820

It looks like you're entering the url in the background image, for background size using background-size: cover;

If your url address is correct, then try adding

width:100%; 
height:100vh;
user_184033930

i recommend to use inline scope css, i hope it works for you

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="#homehero {.css">
    <style>
        #homehero {
        background-image: url("image/image.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
       
        }
    </style>
</head>
<body>
    <div>
        <div id="homehero">
           
        </div>
    </div>
   
</body>
</html>

this might be the reason why it can happen https://www.geeksforgeeks.org/types-of-css-cascading-style-sheet/#:~:text=As%20Inline%20has%20the%20highest,sheets%20have%20the%20least%20priority.

user_181149860

I would suggest below changes,

#homehero 
    {
        background-image: url("images/coast.jpg");
        width:300px; 
        height:300px;
        background-size: cover;
        background-repeat: no-repeat;
    }

Where, your image will be cover and if you specifies width and height it would be good and also your image will not be repeat as no-repeat property is used.

user_182404330
Related