Search code examples
cssurlbackground-image

Why is CSS background-image url not displaying my image although link and paths are correct?


I am trying to display an image on a mock webpage I'm building as a background image. When I try using the css background-image and url it will not load. I am trying to put the image as a background image on the header section under the header class, but it just won't load. Whne I hover over the path in brackets it brings up a thumbnail of the image, so I know it can access it.

I have tried everything - moving the file, renaming the file, checked my paths are correct, using and removing quote marks, backslashes, forward slashes, checking my css path is correct in my head section, checking the file extension. When I click on the file name in the console 'sources' section and select open in new window it brings the image up in a new window just fine, but Chrome or any other browser won't seem to load the file for some reason?!

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    font-size: 20px;
}

header {
    background-image: url(resources/img/table_window.jpg);
}
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,400i,700" rel="stylesheet">
        
        <title>Phil My Glass</title>
    </head>
    <body>
        <header>
        <div class="top-section">
            </div>
        </header>
    </body>
</html>

The file loads and displays just fine if I put it into the HTML using an img tag, but won't display from css.


Solution

  • You just need to specify a height for your header - as it was just defaulting to 0 pixels high :-)

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    html {
        font-family: 'Raleway', sans-serif;
        font-weight: 300;
        font-size: 20px;
    }
    
    header {
        background-image: url(https://picsum.photos/200/300);
        height: 100px;
    }
    <!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="style.css">
            <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,400i,700" rel="stylesheet">
            
            <title>Phil My Glass</title>
        </head>
        <body>
            <header>
            <div class="top-section">
                </div>
            </header>
        </body>
    </html>