CODEWITHSUNDEEP
cssimagebackgroundbackground-image
SpaceApe
SpaceApe

Reputation: 639

Background-image not displaying online

Arg, it's getting frustrating!

None of the solutions on Stack Overflow are working for me, and I just don't know why my background-image isn't showing!

I gave it a background-color, and it worked fine. Offline you can see the background-image, but when I upload my site it's gone. When I type the path of my image, it shows. So it's there.

This is the site:

http://stilld.nl/2014/

In the dark blue area should be my logo.

#fade-it{
    background: url('../images/branding.png');
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 408px;
    height: 500px;
    opacity: 1;
    position: relative;
    overflow: hidden;
    z-index: 2000;
}

I've tried a ridiculous high z-index, still nothing. I tried opacity: 1. Nothing. I tried display: block. Nothing. I checked the path a thousand times. I used background: and background-image:. Still nothing.

Hope you guys can help me out!!

Upvotes: 0

Views: 805

Answers (3)

cbr
cbr

Reputation: 13662

You should make sure that the image is in the right folder, relative to the URL you're using.

../images/image.jpg means "go up one folder, find a folder named "images" and use the image called "image.jpg" inside."

./images/image.jpg means "find a folder called "images" in this current folder and use the image called "image.jpg".

/images/image.jpg means go to the root folder, find folder "images" and use "image.jpg".

EDIT: Found it. Your image is in /2014/images/. Right now you're trying to make it find the images folder inside the 2014 folder. What you can do is set the path to: /2014/images/branding.png

Upvotes: 0

johnkavanagh
johnkavanagh

Reputation: 4674

The file branding.png does not exist on your live server. Check it's location and make sure that:

  • The file is in the right place;
  • The CSS is referring to it correctly.

enter image description here

For reference, the way your CSS is currently set-up, it attempting to load this image from: http://stilld.nl/2014/images/branding.png. Try clicking the link, you'll see it returns a 404 'not found' error page.

Upvotes: 1

Kishori
Kishori

Reputation: 1095

I think the path that you have provided is not matching on deployed site. Try giving image path as

background: url('./images/branding.png');

instead of 

background: url('../images/branding.png');

may be this will work

Upvotes: 0

Related Questions