[Solved] CSS gradient problem when combined with image y position dark at top - CSS-Tricks

This topic is empty.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
January 23, 2014 at 4:07 pm #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

January 24, 2014 at 2:17 am #161065

Paulie_D
Member

A Codepen example would be helpful.

January 28, 2014 at 11:07 pm #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.

January 29, 2014 at 2:53 am #161334
Paulie_D
Member
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?
January 29, 2014 at 2:23 pm #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;

January 30, 2014 at 2:57 am #161390

Paulie_D
Member

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.
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

The forum ‘CSS’ is closed to new topics and replies.