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