How to set position for a linear-gradient background in css3

Posted by Virender Sehwag on Programmers See other posts from Programmers or by Virender Sehwag
Published on 2014-08-19T09:34:45Z Indexed on 2014/08/19 10:30 UTC
Read the original article Hit count: 211

Filed under:

css3

I am trying to set the position (that is, margin or padding from top) of body tag's linear background with image.

My code is

 background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.9), rgb(0, 0, 0)), url("g2hd.jpg");

 background-repeat: repeat, no-repeat;
 background-attachment: fixed; background-position: 0% 30px, center center;

but 30px is not working

but it works for normal for background-image:url("g2hd.jpg");

any idea

Related posts about css3

A Few of My Favorite HTML5 and CSS3 Online Tools

as seen on ASP.net Weblogs - Search for 'ASP.net Weblogs'
I really enjoy coding up HTML5, CSS3, and JavaScript applications but there are some things that I’m better off writing with the help of a development tool. For example, CSS3 gradients aren’t exactly the most fun thing to write by hand and the same could be said for animations, transforms, or styles… >>> More
CSS3 - Validator - RGBA wrong?

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm using the W3C CSS Validator with the Profile CSS3 but the validator says that my CSS rgba()'s are wrong. I looked up the Color Module Level 3, and the syntax is the same as mine. I also tried the Dev-Validator, same result. Example input: div.class { border: 1px solid rgba(0, 0, 0, 0.5); } Am… >>> More
CSS3 webkit fading in a tooltip.

as seen on Stack Overflow - Search for 'Stack Overflow'
HI, I've just been experimenting with a CSS tooltip that fades in with CSS3's transitions. I've got it working up to a point, but for some reason, when I hover over where it's meant to be, it activates, even though it's positioned left:-999px;. So basically, what am I doing wrong/is what I was… >>> More
Poll: CSS3 color transparency

as seen on Stack Overflow - Search for 'Stack Overflow'
Many of you already know that you can express colors in your stylesheets like: color: #FFF; color: #FFFFFF; color: rgb(255,255,255); color: hsl(100%,100%,100%); and that you can use rgba() and hsla() to express color transparency. Do you think it would be a good idea to be able to express color… >>> More
Webkit CSS3 for Mozilla

as seen on Stack Overflow - Search for 'Stack Overflow'
What is the equivalent of -webkit-transition: opacity 0.6s linear; in -moz? I tried replacing -webkit with -moz but nothing happened. I even tried extending it to -moz-transition-property/duration but with no success. >>> More

Developer IT

How to set position for a linear-gradient background in css3 - Developer IT

How to set position for a linear-gradient background in css3

css3

Related posts about css3

A Few of My Favorite HTML5 and CSS3 Online Tools

CSS3 - Validator - RGBA wrong?

CSS3 webkit fading in a tooltip.

Poll: CSS3 color transparency

Webkit CSS3 for Mozilla

Categories cloud