Conflicting rules with background-image with image and gradients.

This topic contains 4 replies, has 2 voices, and was last updated by  Sebastian 2 months, 2 weeks ago.

Author Posts

majamaki

Hello,

We just updated to the most recent version and noticed on our sites that assign a background with a linear-gradient and an background-image that the way the CSS is written with the gradient the background image is overridden by the gradient rule instead of having both work together as they did previously.

Example of new formatting:

.fl-page-header {
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3) !important;
background-color: rgb(0, 88, 91) !important;
background-image: url(https://silvermoonrace.com/wp-content/uploads/sites/11/2018/01/moon-stars-pattern-10.png) !important;
background-position: center center !important;
background-repeat: repeat !important;
background-attachment: fixed !important;
background-size: auto !important;
background-image: linear-gradient(135deg, rgb(0, 194, 201), rgb(0, 88, 91), rgb(227, 85, 0)) !important;
}

In the above instance, the second instance background-image attribute overrides the image first one with the image.

When I manually edit the code to this way it works setting it to background instead of background-image and combining the image and linear-gradient attributes.

.fl-page-header {
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3) !important;
background-color: rgb(0, 88, 91) !important;
background: url(“/wp-content/uploads/sites/11/2018/01/moon-stars-pattern-10-300×300.png”), linear-gradient(135deg, rgb(0, 194, 201), rgb(0, 88, 91), rgb(227, 85, 0)) !important;
background-position: center center !important;
background-repeat: repeat !important;
background-attachment: fixed !important;
background-size: auto !important;
}

Please advise on how to best fix this so that I don’t have to manually update the CSS on all our sites. We do this effect on a lot of our sites where we do a linear-gradient and then have a semi-transparent image tile over it for visual effect.

Thanks for taking the time to review.


Sebastian

Hey,

Sorry for the hassle. I’m working on a fix for this now. Once it’s ready, you should be able to simply update to solve this issue across any other sites. I’ll let you know when the update is ready.

Cheers,
Sebastian


majamaki

Thanks Sebastian. It used to work just perfectly before, not sure what changed it, but it should go back to the way it was before. One thing I noticed with the band-aid fix I did that the fixed attribute stopped working. I’m sure I can get it working right, just need to find time to get back to try and test it out while still keeping it semantically correct.

Thanks for looking into it. Love Microthemer.


Sebastian

Hey,

I’ve just released version 5.6.1.0 which should fix your gradient / background-image issue. Please let me know how you get on 🙂

Thanks!
Sebastian

P.S. The rule you manually customised will probably need to be redone via the UI. But other non-edited rules should be corrected simply by updating MT.


Sebastian

P.P.S – please update to 5.6.1.2, as the updates I released (5.6.1.0 and 5.6.1.1) had an issue with saving styles using the editor.

You must login or register to reply to this topic.