css background image wont work

Question

For the life of me I can't figure out why my background image wont show up. The file path is correct. Here is the HTML :

 <section class="banner_area">
      <p>Hi, I'm a <span>Front-End Web Developer</span> 
          who makes clean and responsive designs come to life.
      </p>
</section>

and the CSS :

.banner_area {
    background-image:url("images/banneralt4.jpg");
    height:600px;
    background-attachment:fixed;
    background-size:cover;
    background-position:center;
    position:relative;
}

it worked fine on my other one. same code basically. If i were to set a background color it would show up fine.

Solution 1

The image location is relative to the CSS file. From your explanation your folder structure is the following:

• root folder
  • css
  • images
  • script

As the css folder is at the same level as the images folder you need to go up one level to access an image in the images folder. Therefore the location of the image in your css should be:

background-image:url:("../images/banneralt4.jpg");

The reason why images/banneralt4.jpg worked when adding the image directly to your HTML is because the images folder is a child of the root folder.

Solution 2

It looks like you are within a CSS folder. In you file path exit the folder and direct to the images (i doubt the images folder are within your CSS folder)

background-image:url("../images/banneralt4.jpg");

Comments

[Hobbes]

I have my main folder which has a css folder, images folder, and a script folder. I can load other images perfectly fine like my logo for instance. The file path has to be correct. So you're right. they're not within my CSS folder.

[Hobbes]

ahh, it worked. Thank you for your detailed explanation. Would have never figured that out. I thought when people put "../" they were using that as missing folder path or something. Didn't know it was literal. I'd vote you up, but I dont have enough reputation

[Kevin Lynch]

This is exactly the same as my answer

[Hobbes]

yeah, but he explained it better. sorry