Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] CSS gradient problem when combined with image y position dark at top

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #161036
    kerry_7777
    Participant

    Just noticed a new issue in Chrome with background gradients dark at the top when combined with a background image that has a y position of **px

    It looked fine for over one year & now looks awful.

    Original code: background:url(http://cdn.css-tricks.com/images/arrow-13x10.png) no-repeat right 13px, linear-gradient(to bottom, #57caff 0%,#1798d2 78%,#0387c5 100%);

    This seems to fix it but not exact in pixels: background:url(http://cdn.css-tricks.com/images/arrow-13x10.png) no-repeat right center, linear-gradient(to bottom, #57caff 0%,#1798d2 78%,#0387c5 100%);

    Any suggestions? It is related to the Y position of the image.

    Thanks

    #161065
    Paulie_D
    Moderator

    A Codepen example would be helpful.

    #161321
    kerry_7777
    Participant

    Hi Paulie,

    Please see the dilemma in Chrome here [http://cdpn.io/AfCIz]
    (http://cdpn.io/AfCIz “Chrome Colour Gradient Problem With Pixel Y Position”)

    If you set the Y position as a percentage value the problem goes away.

    #161334
    Paulie_D
    Moderator

    The problem was (I think) that you were using two images (albeit that one of them was a gradient) but only one set of positioning values.

    Substitute this.

    background: url(http://www.teaching.com.au/IBSStaticResources/NS_Resources/MTA/arrow-13x10.png) no-repeat right 25px, linear-gradient(to bottom,  #57caff 0%,#1798d2 78%,#0387c5 100%);
    

    with this…

    background-image: 
    url(http://www.teaching.com.au/IBSStaticResources/NS_Resources/MTA/arrow-13x10.png),
    linear-gradient(to bottom, #57caff 0%,#1798d2 78%,#0387c5 100%); 
    
    background-repeat: no-repeat;
    background-position: right 25px, 0 0;
    

    Result Codpen: http://codepen.io/Paulie-D/pen/tJaFq

    Is that what you were after?

    #161351
    kerry_7777
    Participant

    Hi Paulie,

    You are right the gradient did not have a start position. I am not a big fan of the “background-image:” property & splitting up the background into sub properties.

    This also fixes the problem:

    background: url(http://www.teaching.com.au/IBSStaticResources/NS_Resources/MTA/arrow-13x10.png) no-repeat right 25px, linear-gradient(to bottom, #57caff 0%,#1798d2 78%,#0387c5 100%) 0 0;

    #161390
    Paulie_D
    Moderator

    I am not a big fan of the “background-image:” property & splitting up the background into sub properties.

    Fair enough, but I think that with multiple bg images it makes reading the raw CSS much easier.

    Obviously when it’s minified /compressed it doesn’t matter.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.