2 replies [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 45 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

background: #b3dced; /* Old browsers */
background: -moz-linear-gradient(top,  #b3dced 0%, #29b8e5 50%, #bce0ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b3dced), color-stop(50%,#29b8e5), color-stop(100%,#bce0ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* IE10+ */
background: linear-gradient(to bottom,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee',GradientType=0 ); /* IE6-9 */
background: #d2dc9d url(images/blackgoose.png) no-repeat center 100px fixed;

When i take off the last line the gradient effect works , but the image is not shown in the background and when i add the last line the image shows up but the gradient effect does not work . Why is it ?

by last line i mean : -

background: #d2dc9d url(images/blackgoose.png) no-repeat center 100px fixed;

The code is auto generated using www.colorzilla.com/gradient-editor/ , if that helps .

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Wrong syntax

By using a new property statement, the last line overrides previous background rules. See ยง3.1. Layering Multiple Background Images. The gradient is simply an image the browser builds. E.g.

body {
  background: url(my.png) center no-repeat fixed, 
               linear-gradient(to bottom, #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
  }
Note the comma after "fixed".

See also https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_gradients

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 45 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Thank u

Did't think i'd get the answer here ! but thank you sir . you helped me