0

Here is the situation:

I have one css class to set the background image(url) and another css class to set the gradient effect.

However, if I both the classes to one element. As both class use the attribute - [background-image] it will override one another.

.a{background-image:url('SOMEPICURL')
.b{background-image:linear-gradient(xxx);}

The limit is I cannot merge these two classes into one.

Say, I have an element:

<div class="a"></div>

The "div" is assigned a class - a. And we cannot modify the a and the element, except add another class, in this case I'm trying to add the class "b". Unfortunately, if I just simply add the "b" like this:

<div class="a b"></div>

The "b" will effect and override the "a" - the background image set by "a" will not display.

what I want to do is - by adding the class "b", the background and linear-gradient will work at the same time.

I cannot change the "a".

zhangv
  • 950
  • 1
  • 9
  • 25
  • This is not enough info so you put here your HTML code and CSS or in snippet, codepen – Aman Oct 26 '20 at 04:51
  • BTW: `background-image` is misspelled in the fist line. Don't necessarily want to edit it myself because I'm not sure if it is intentional or not (and by "intentional" I mean causing your problem in some way that is unclear to me now. I think I personally would need more context to be 100% sure). I'd hate to edit the problem out of your question by mistake. –  Oct 26 '20 at 05:44
  • If you are allowed to know the background-image setting in one of the classes a or b then you can use pure CSS. But if you are not allowed to know the values in either a or b then I think you will have to use some library/JS to merge the two. Is this acceptable? – A Haworth Oct 28 '20 at 07:25
  • I guess JS is the final shot. Thanks. – zhangv Oct 28 '20 at 09:38

1 Answers1

1

The aim is to merge two settings for the background-image of this form:

.a { background-image: url('SOMEPICURL'); }
.b { background-image: linear-gradient(xxx);}

Fortunately background-image allows more than one background to be set within the one CSS property. They get separated by a comma.

This means we can have:

.a.b { background-image:linear-gradient(xxx), url('SOMEPICURL'); }

It depends on exactly the effect that is wanted as to what form the linear-gradient takes (settings like 'to bottom').

To make the settings more general we can use CSS variables for the gradient and image so in the event they need to be changed this can be in just one place in the declarations.

Here is an example of overlaying a linear gradient on a gear image

:root {
    --gradstart: rgba(245, 246, 252, 0.52);
    --gradend: rgba(117, 19, 93, 0.73);
    --image: url(https://i.stack.imgur.com/ezqjt.jpg);
}
/* add declarations for .a and .b using the above variables */
.a.b {
    background-image: linear-gradient(to bottom, var(--gradstart), var(--gradend)), var(--image);
    width: 150px;
    height: 150px;
    background-size: cover;
}
<div class="a b"></div>
A Haworth
  • 30,908
  • 4
  • 11
  • 14
  • Thanks but this is not my solution. As I cannot change "a", all I can do is "appending another class". – zhangv Oct 26 '20 at 18:13
  • Hi, I didn't think you would be changing a, I only suggested using the CSS variables to make it more general. Are you saying that you can't know what class a has in it? – A Haworth Oct 26 '20 at 19:29
  • I cannot define the variable(image) in the ":root", as the background-image is set by "a". And I could not redefine it in anywhere. – zhangv Oct 27 '20 at 02:05
  • You do not need to define it as a css variable, that was just to give a general example. Use the actual value in .a.b I’d assumed that you knew the actual value. If not then this method cannot work. – A Haworth Oct 27 '20 at 08:01
  • I got the point. I do not know and will not change the image url(defined by a). I just want to give the image a gradient effect, ***without knowing and changing the "a"*** – zhangv Oct 28 '20 at 02:47
  • Ah, thanks, I had thought that you could tell what the image used is. If you can't see the a and can't know what the image is then I think we are into using pseudo elements, but I'm not sure. BTW you question is closed as already having an answer, which I don't think it does since you don't know what image is being used. I'll think again but have a look at pseudo elements in case they would help. – A Haworth Oct 28 '20 at 04:48
  • Are you allowed to know the linear gradient in b or is that also not known? – A Haworth Oct 28 '20 at 05:48