The background images of the div is not being displayed. What can I do?

Question

I have entered the HTML and CSS codes below. What the problem, is that the background image fails to appear. Please do help. Thanks in advance.

.parallax-1 {
  height: 200px;
  width: 100%;
  background: linear-gradient(to bottom, #000 -10%, transparent 30%),
              linear-gradient(to top, #000 -10%%, transparent 30%),
              url('http://lorempixel.com/400/200');
  background-size: cover;
}

.parallax {
  width: 100%;
}

.descript {
  background: #f2f2f2;
  font-family: 'open sans', sans-serif;
  font-style: italic;
  font-weight: 200;
  font-size: 0.7em;
  padding: 5px 10px;
}

<!DOCTYLE html>
<html>
  <head>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,800italic,300,400' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <div class="parallax-1 parallax">
      <div class="descript-parallax">
        <span>Description for the image</span><br>
        <span class="photo-descript">Copyright someone</span>
      </div>
    </div>
  </body>
</html>

Update: I removed linear gradient ans tried, as advised in some code given in the answers. How can I add them? Also, why is this problem coming only in the top browser Chrome ( latest version )? Some browsers are displaying it, according to the comments below.

I can see the background image in the snippet - android samsung browser — slartidan, Jul 26 '15 at 11:07

score 1 · Answer 1 · edited May 23 '17 at 11:58

your css is mixed up.

use like this

body {
  background: #6cab26;
  background-image: url(IMAGE_URL); /* fallback */
  background-image: url(IMAGE_URL), -webkit-gradient(linear, left top, left bottom, from(#6cab26), to(#6ceb86)); /* Saf4+, Chrome */
  background-image: url(IMAGE_URL), -webkit-linear-gradient(top, #6cab26, #6ceb86); /* Chrome 10+, Saf5.1+ */
  background-image: url(IMAGE_URL),    -moz-linear-gradient(top, #6cab26, #6ceb86); /* FF3.6+ */
  background-image: url(IMAGE_URL),      -o-linear-gradient(top, #6cab26, #6ceb86); /* Opera 11.10+ */
  background-image: url(IMAGE_URL),         linear-gradient(to bottom, #6cab26, #6ceb86); /* W3C */
}

in order to get background image with gardient. (How do I combine a background-image and CSS3 gradient on the same element?)

nelek · Answer 2 · 2015-07-26T11:32:15.690

It's working in Firefox, Chrome, ... but You need define background for each -moz- for FF, -webkit- for chrome and so on.

There is example :

.parallax-1 {
  height: 200px;
  width: 100%;
  border:solid 1px gray;
  background: -moz-linear-gradient(top, rgba(0,0,0,0.65) -10%, rgba(0,0,0,0) 30%),url('http://lorempixel.com/400/200');
  background: -webkit-gradient(linear, left top, left bottom, color-stop(-10%,rgba(0,0,0,0.65)), color-stop(30%,rgba(0,0,0,0))),url('http://lorempixel.com/400/200');
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) -10%,rgba(0,0,0,0) 30%),url('http://lorempixel.com/400/200');
  background: -o-linear-gradient(top, rgba(0,0,0,0.65) -10%,rgba(0,0,0,0) 30%),url('http://lorempixel.com/400/200');
  background: -ms-linear-gradient(top, rgba(0,0,0,0.65) -10%,rgba(0,0,0,0) 30%),url('http://lorempixel.com/400/200');
  background: linear-gradient(to bottom, rgba(0,0,0,0.65) -10%,rgba(0,0,0,0) 30%),url('http://lorempixel.com/400/200');
  background-size: cover;
}

.parallax {
  width: 100%;
}

.descript {
  background: #f2f2f2;
  font-family: 'open sans', sans-serif;
  font-style: italic;
  font-weight: 200;
  font-size: 0.7em;
  padding: 5px 10px;
}

<div class="parallax-1 parallax">
      <div class="descript-parallax">
        <span>Description for the image</span><br>
        <span class="photo-descript">Copyright someone</span>
      </div>
</div>

Of course, for .parallax You can add color:white or some other color, because Your gradient background, black color for text is little hard to see.

The background images of the div is not being displayed. What can I do?

2 Answers2