Background Image Overlay With Text | One Line CSS Trick

Add any background image with this simple trick & add an overlay effect on it. Watch this full video to know that simple trick.


#css #html

What is GEEK

Buddha Community

Background Image Overlay With Text | One Line CSS Trick
Beth  Nabimanya

Beth Nabimanya


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

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

Kasey  Turcotte

Kasey Turcotte


One Line of Code for a Common Text Pre-Processing Step in Pandas

A quick look at splitting text columns for use in machine learning and data analysis

ometimes you’ll want to do some processing to create new variables out of your existing data. This can be as simple as splitting up a “name” column into “first name” and “last name”.

Whatever the case may be, Pandas will allow you to effortlessly work with text data through a variety of in-built methods. In this piece, we’ll go specifically into parsing text columns for the exact information you need either for further data analysis or for use in a machine learning model.

If you’d like to follow along, go ahead and download the ‘train’ dataset here. Once you’ve done that, make sure it’s saved to the same directory as your notebook and then run the code below to read it in:

import pandas as pd
df = pd.read_csv('train.csv')

Let’s get to it!

#programming #python #one line of code for a common text pre-processing step in pandas #pandas #one line of code for a common text pre-processing #text pre-processing

Ray  Patel

Ray Patel


top 30 Python Tips and Tricks for Beginners

Welcome to my Blog , In this article, you are going to learn the top 10 python tips and tricks.

1) swap two numbers.

2) Reversing a string in Python.

3) Create a single string from all the elements in list.

4) Chaining Of Comparison Operators.

5) Print The File Path Of Imported Modules.

6) Return Multiple Values From Functions.

7) Find The Most Frequent Value In A List.

8) Check The Memory Usage Of An Object.

#python #python hacks tricks #python learning tips #python programming tricks #python tips #python tips and tricks #python tips and tricks advanced #python tips and tricks for beginners #python tips tricks and techniques #python tutorial #tips and tricks in python #tips to learn python #top 30 python tips and tricks for beginners

Jam  Dana

Jam Dana


CSS Background Image Tutorial - 7 Tips and Tricks

In this article, you could see 7 different tips and tricks to make amazing things with the background image. I’m pretty sure those hints will be helpful and allow you to get amazing results on your layouts.

#html and css #background image #css #html

Background Image Overlay With Text | One Line CSS Trick

Add any background image with this simple trick & add an overlay effect on it. Watch this full video to know that simple trick.


#css #html