External CSS background-image not showing

StackOverflow https://stackoverflow.com/questions/22451640

  •  15-06-2023
  •  | 
  •  

質問

I have an issue with the background-image property in an external CSS file. I can't seem to get the image to show up. Its been while since I have coded so maybe it's just me forgetting everything I know but I'm pretty sure I have the link right. The website is set up like this

/Root/
   index.html
   /styles/
      webstyles.css
      /img/
         header.jpg

The background works when I use it inline so it's starting to annoy me.

HTML

<html>
    <head>
        <meta charset="UTF-8">
        <title>MYSITE</title>
        <link rel="stylesheet" type="text/css" href="/styles/webstyles.css">
    </head>
    <body>
        <div class="headerBar">
            <h1 class="Hlogo">Title</h1>
        </div>
    </body>
</html>

CSS

body
{
    background:#999999;
}
headerBar
{
    background: url(/styles/img/header.jpg);
}

Thanks for any help.

役に立ちましたか？

解決

If this style is in webstyles.css, then you need to use this way.

.headerBar{
    background: url('img/header.jpg');
}

Based on the folder structure, "styles/img/header.jpg" is still a wrong path.

And also, I'm not sure why, but you are missing . for CSS class selector when selecting the headerBar. Fix that one too.

他のヒント

You can use:

background: url("styles/img/header.jpg");

Replace

background: url(/styles/img/header.jpg);

with

background: url('img/header.jpg');

You can use:

.headerBar
{
    background: url("styles/img/header.jpg");
}

since styles folder is the same level as your HTML file.

However, if your img folder is not placed inside styles folder (which makes more sense), then you want this path instead:

.headerBar
{
    background: url('img/header.jpg');
}

Also you're missing . to target class .headerBar

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top