Implementing responsive background-image is very simple, but combining it withadditional** background-color** and **linear-gradient **is not as simple as imagined, and if you also have to make the background image light and transparent, and also with some text on it that should not be transparent โ€ฆ

Yeah, it sounds cumbersome ๐Ÿ™ˆ, but this is the task I encountered in my current project, let me explain the purpose with pictures first.

We have two different images ( Iโ€™m using example images here ) that need to be displayed according to the screen size, mobile version and desktop version: ๐Ÿ‘‡

For the component I created the example code below:

My purpose is to use css property โ€œdisplay**โ€ **to confirm which image is displayed on which device according to screen sizes.

โœ‚๏ธ Implementing them is simple, but here comes the requirement, the final effect should look like these below:

mobile image with effect

Ok, after first glance, what I see is that we maybe need some **linear-gradient, someadditional background colors, some text positions, **some image opacity rulesโ€ฆ

Letโ€™s start with the first image (desktop version) ๐ŸŒธ

First, create CSS for the desktop image wrapper, I named it โ€œheroImageWrapperโ€, see example code screenshot below: ๐Ÿ‘‡ ( click on the screenshot for the complete view )

define height and width is very important

  • With CSS โ€œdisplayโ€, we could determine that this image should only appear on screen size that is bigger than 481px as โ€œdesktopโ€ version
  • Give the wrapper an โ€œrelativeโ€ position so that we can position the text within it later
  • Define linear-gradientwith 90deg (t_he values _0deg180deg270deg, and 90deg, are equivalent to to topto bottomto left, and to right respectively) and opacity: 0.92 to blur the left side a little
  • โ€ฆ add some border, border-radius โ€ฆ

๐ŸŒฑ Now comes the interesting part, as we see from final effect, there should be some additional colors, opacity โ€ฆ , until now we have only implemented the **linear-gradient and some opacity, **but the picture should be darker and more blurred, how can we add another color to overlap the entire image?

Maybe we can imagine with something like an overlay between the image and the text. Either way, we need a CSS technique to introduce this kind of coverage. ๐Ÿ

Natively, CSS provides the powerful ::before, ::after elements for adding stylistic content to the page that shouldnโ€™t affect markup.

In this case, my solution was use โ€œbeforeโ€ to add a โ€œpseudoโ€ content which is actually only a โ€œplaceholderโ€ without any content except an additional background color #beddf2.

๐Ÿ‘‰ One important note, all pseudo-elements require a content CSS property to display. In our case, this will just be a blank string.

#css #linear-gradient #react #background-image #trick #css

Css trick: add colour and linear-gradient to a background image
1.80 GEEK