Using a background image CSS

Question

I am trying to put an image into the background of my app. I seem to be running into some issues with the CSS. I have the following class:

.fixedBar {
    position: fixed;
    left:0%;
    top: 0%;
    width:100%;
    padding:15px 15px;
    background-color:#003c0c;
    background-image: url(NavAppPics/city-clipart-black-and-white.gif);
    background-blend-mode: multiply;
    background-size:cover;
    z-index: 6;
}

I am trying to use an image from a folder, but I cannot figure out how to load the image from the folder. I've looked at other similar questions os Stack Overflow, but i cannot tell what I am doing differently.

As well, I am trying to make the bottom of the image line up with the bottom of the fixed bar (the class i am using) however it seems to be lining up the image incorrectly (i switched to an online URL to test this). any ideas or help would be greatly appreciated!

edit:

My folder structure for this section is:

Public
- bower_components
- directives
- NavAppPics
  - city-clipart-black-and-white.gif
- styles
  - styles.css (where the class is)
- tpl

Have you used dev tools before? Check to make sure that the image path is valid, if it's not, the image will show up as a 404 in your Network tab. URL's in your CSS are relative to the location of your css file. — Benjamin Solum
– Benjamin Solum, Commented Aug 5, 2015 at 14:27
You can edit your question to add your folder structure there instead of in the comments. — BSMP
– BSMP, Commented Aug 5, 2015 at 14:28
I just edited the post, and it now contains my folder structure — Graeham Broda
– Graeham Broda, Commented Aug 5, 2015 at 14:38

TheIronCheek · Accepted Answer · 2015-08-05 14:38:32Z

1

EDIT: The filepath must be wrong for your image. Where is the NavAppPics folder located? If it's in the root directory, add a / to front of the URL to tell it start from the root directory rather than the current folder:

background-image: url(/NavAppPics/city-clipart-black-and-white.gif);

As far as aligning the image to the bottom of the div:

background-position: center bottom;

More info about the background-position property:

http://www.w3schools.com/cssref/pr_background-position.asp

edited Aug 5, 2015 at 14:38

answered Aug 5, 2015 at 14:31

TheIronCheek

1,2312 gold badges25 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ruddy Over a year ago

You do not need quotes, it will work just fine without.

TheIronCheek Over a year ago

Really? Wow, I just tried it and you're right. Never knew that! Editing my answer.

Joaquim Rendeiro Over a year ago

You're on the right track: relative url()s in CSS files are relative to the location of the CSS file itself. So for example is the css file is in /myapp/styles/style.css and the image is in /myapp/NavAppPics/image.gif, it can be referenced by url(../NavAppPics/image.gif)

Graeham Broda Over a year ago

Thanks for the advice. Like you said, I just forgot the / infront of NavAppPics. also, the alignment you suggested worked perfectly. Thanks so much!

Havenard · Accepted Answer · 2015-08-05 14:41:54Z

0

The address of the image is relative to the CSS style file.

Since your CSS is at styles/styles.css, the background image is being looked for at styles/NavAppPics/city-clipart-black-and-white.gif.

Specify a relative or absolute path to fix the problem:

background-image: url(/NavAppPics/city-clipart-black-and-white.gif);

Or:

background-image: url(../NavAppPics/city-clipart-black-and-white.gif);

answered Aug 5, 2015 at 14:41

Havenard

28.1k5 gold badges38 silver badges66 bronze badges

Collectives™ on Stack Overflow

Using a background image CSS

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related