Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Cool How to specify starting position for CSS linear gradient

    Hi,

    I have a a graphic that's 600px wide. I would like to have a CSS gradient start from the end of my picture (600px in from the left) and fade out to the width of the screen. I'd like this because it will give the effect of my banner graphic dynamically taking up the width of the screen.

    I have a problem though. The syntax for linear-gradient seems to not have an explicit way of specifying the starting position. It seems to only allow you to write left, or left top, or a type a number specifying the gradient direction...

    Can anyone give me some tips on how to achieve this effect?

    Thanks so much for your time,
    Frank.

  • #2
    New Coder
    Join Date
    Sep 2012
    Location
    USA
    Posts
    13
    Thanks
    0
    Thanked 2 Times in 2 Posts
    HI ! i have one example. i hope it will help you.

    div {
    background-image: -moz-linear-gradient(360deg,rgb(255,255,255) 25% ,rgb(241,123,25) 75%);

    -pie-background: linear-gradient(360deg,rgb(255,255,255) 25% ,rgb(241,123,25) 75%);
    behavior: url(/PIE.htc);
    }

  • Users who have thanked JefferyJamison for this post:

    root44 (02-16-2013)

  • #3
    New Coder
    Join Date
    Nov 2012
    Location
    India
    Posts
    53
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Hello, I think below code will work as you are looking here CSS gradient.

    #linearBg1 { /* fallback */ background-color: #1a82f7; background-image: url(images/linear_bg_1.png); background-repeat: repeat-y; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, right top, from(#1a82f7), to(#2F2727)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(left, #2F2727, #1a82f7); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2F2727, #1a82f7); /* IE 10 */ background: -ms-linear-gradient(left, #2F2727, #1a82f7); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2F2727, #1a82f7); }

  • #4
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi,

    Thanks for the responses! I decided to use the "length" parameter to make my gradient extend to the end of my image in one colour, and then fade out.

    Code:
    background-image: -webkit-linear-gradient(left, #76a6ae, #76a6ae 600px, #c7d5c8);
    /* And similar stuff for the -moz, -ms, -o variants... */
    Thanks for the help,
    Frank.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •