CSS background-image not visible

Question

I have tried this on jsfiddle as its works, i get it anywhere near my webserver and it doesnt work, tried it on three of my sites. Any ideas? *i am using the nasa photo for this question only. is there a permission aspect i dont know of? anything please?!?!

I have looked at many questions but nothing is getting me anywhere.

.information {
    position: relative;
    display: inline-block;
    vertical-align: top; 
    top: 0;
    width: 45%;
    margin-left: 20px;
    background: #fff;
    height: 160px;
    background-image:url("http://www.nasa.gov/sites/default/files/images/743348main_Timelapse_Sun_4k.jpg");
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:left top;
}

Answer 1

Remove background-attachment:fixed; from your styling.

background-attachment: fixed means that the background is fixed with regard to the viewport. Even if an element has a scrolling mechanism, a ‘fixed’ background doesn't move with the element.

Here is a demo to show you the problem. When the images are lower in the page you cannot see them. As you scroll down you can see the images:

Demo

HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum deleniti dolor debitis iste eligendi reprehenderit voluptate dignissimos velit tempora quidem molestias tenetur accusantium ea repellendus atque neque minima quos sed!

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum deleniti dolor debitis iste eligendi reprehenderit voluptate dignissimos velit tempora quidem molestias tenetur accusantium ea repellendus atque neque minima quos sed!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum deleniti dolor debitis iste eligendi reprehenderit voluptate dignissimos velit tempora quidem molestias tenetur accusantium ea repellendus atque neque minima quos sed!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum deleniti dolor debitis iste eligendi reprehenderit voluptate dignissimos velit tempora quidem molestias tenetur accusantium ea repellendus atque neque minima quos sed!</p>
<div class="information"></div>
<div class="information"></div>
<div class="information"></div>
<div class="information"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum deleniti dolor debitis iste eligendi reprehenderit voluptate dignissimos velit tempora quidem molestias tenetur accusantium ea repellendus atque neque minima quos sed!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum deleniti dolor debitis iste eligendi reprehenderit voluptate dignissimos velit tempora quidem molestias tenetur accusantium ea repellendus atque neque minima quos sed!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum deleniti dolor debitis iste eligendi reprehenderit voluptate dignissimos velit tempora quidem molestias tenetur accusantium ea repellendus atque neque minima quos sed!</p>

CSS

.information {
    position: relative;
    display: inline-block;
    vertical-align: top; 
    top: 0;
    width: 45%;
    margin-left: 20px;
    background: #fff;
    height: 160px;
    background-color: #eeeeee;
    background-image:url("http://lorempixel.com/400/200/");
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:left top;
    margin: 10px;
}

Answer 2

I had no problem accessing this image in jsfiddle so i doubt the issue is to do with permissions.

I think the issue is that your image is too big for the area of the div provided and is just showing the black in the top left of the image.

Try adding background-size: cover; and background-position: center center; to .information.

Please see this fiddle:

http://jsfiddle.net/LjPfH/

Answer 3

Shouldn't the link use single quotes instead of double quotes in the CSS?

NOT

background-image:url("http://www.nasa.gov/sites/default/files/images/743348main_Timelapse_Sun_4k.jpg");

TRY

 background-image:url('http://www.nasa.gov/sites/default/files/images/743348main_Timelapse_Sun_4k.jpg');

Updated Fiddle Here

W3 Schools info on background image