CODEWITHSUNDEEP
htmlcss
Graeham Broda
Graeham Broda

Reputation: 141

Using a background image CSS

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:

Upvotes: 0

Views: 115

Answers (2)

Havenard
Havenard

Reputation: 27934

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);

Upvotes: 0

TheIronCheek
TheIronCheek

Reputation: 1149

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

Upvotes: 1

Related Questions