- This topic is empty.
-
AuthorPosts
-
January 23, 2014 at 4:07 pm #161036kerry_7777Participant
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 #161065Paulie_DMemberA Codepen example would be helpful.
January 28, 2014 at 11:07 pm #161321kerry_7777ParticipantHi 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 #161334Paulie_DMemberThe 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 #161351kerry_7777ParticipantHi 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 #161390Paulie_DMemberI 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.