I need to switch off the gradient though for smaller screens using a media query but I don’t know what the rule would be. Is there any css rule like linear-gradient: none or similar? I need to keep the image but just not the gradient for certain sizes.
Just specify the background image url again in your media query and that will cancel out the gradient. Just point to the image and omit the gradient.
A linear gradient is basically a background image so you effectively have multiple images. The only way to change it is to specify the background-image property with the values that you need. You can’t pick one image from a comma separated list to change, you have to define them anew.
I forgot to mention that you can only override Inline styles by adding !important to the external rule.
Thanks for the info. The only problem is that I have to use an inline css rule for the image because I’m using liquid markup (the templating language) to point to the image as I can’t use liquid in an external css file (only in the page itself). So I can’t point to the image again and omit the gradient as you suggested because I can’t put it in the external file.
The only thing I can think of is to point to the image in the inline css but then somehow have the gradient in the external file but I don’t know how this would work or if you can do this.
Based on this info, can you see any workaround for this?
No you can’t do that as you haven’t quite grasped the problem.
A gradient is basically a background image and you can only have multiple background images in the one rule via a comma separated list.
You can’t target a specific background image or gradient on the same element; you have to supply all in the one rule.
You would need to have the image and the gradient on separate elements in order to change one or the other.
Maybe your design would allow for the gradient to be supplied via the content property on a pseudo element but I could not tell without seeing the whole thing
