Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 8, 2020 03:38 pm GMT

Discover 7 amazing tips and tricks about the CSS background image

This article was originally published at https://www.blog.duomly.com/css-background-image-tutorial-with-examples

The background image is probably one of the CSS properties which all of us, front-end developers, used at least a few times in our careers. Most people think that there cant be anything unusual about background-image, but after a quick research, I have a different conclusion.

There are lots of questions askes about CSS background image every day in Facebook groups and lots of unknown tricks which can help us to achieve amazing effects and make stunning apps and websites.

Thats the reason I decided to create this article to show you what magic can be done using such a simple CSS property. I gathered seven tips and tricks I believe will be the most useful and create some code examples where you can check whats going on there for you.

And, if as usually if you dont like reading, jump to our Youtube channel for a video version.

Lets check whats behind the background!

1. How to fit a background image perfectly to a viewport?

Lets start from something thats more tip than a trick. How often it happened to you that you had to struggle with your background image to make in perfectly fitted and not stretched and unattractive?

Let me show you the way how to make your background image always perfectly fitted to your browser window!

2. How to use multiple background images with CSS?

Hm, and what if Id like to add more then one image in the background?

Thats possible and not very difficult, but can give a nice result while youve got an idea to mix two graphics into something beautiful.

I personally think that its super useful when we want to add a pattern on the top of a background image, so thats what I will show you in this example.

Lets see how it works!

3. How to create a triangular background image?

Another exciting CSS background image trick is a triangular background image. It creates a really beautiful effect, especially when we would like to show some totally different options like day and night, or winter and summer.

It is done by creating two divs, both for the full viewport, then its needed to add a background image to both of them, and next, the second div needs a clip-path property to create a triangle shape.

Lets see the code and result!

4. How to add a gradient overlay to my background image?

The fourth trick Id like to show you in this article is about overlay on the background image. It can be useful when you would like to put some text on the image, but its too light, and the text is not visible, but it can also improve the image itself.

For example, sunset images can be strengthened by adding a pink-orange gradient or red to transparent gradient.

Lets see how we can easily add a gradient overlay to the background image!

5. How to create a color-changing background image animation?

And what if you can decide which color is the best as an overlay for your background image? Then animations on background images are really useful.

Using an animated overlay can give your website a great final effect, and for sure, people will remember it.

Lets see what we can do using background images and animations in CSS!

6. How to make a grid background image?

Sometimes its a great idea to go a little bit more crazy, especially if the project is about art or photography, then a nice background image can be created with CSS grid and CSS background image.

Oh, if you dont know whats CSS grid check it out here.

Lets take a look!

7. How to set a background image as a text color?

Using background image with background-clip you can achieve a beautiful effect of the background image for text. In some cases, it may be very useful, especially when youd like to create a big text header, but not as boring as a normal color.

Lets see the stunning effect we can get!

Conclusion

In this article, you could see 7 different tips and tricks to make amazing things with the background image. Im pretty sure those hints will be helpful and allow you to get amazing results on your layouts. If youd like to check out some more interesting CSS tips and tricks, check out our latest CSS borders tips and tricks article and one of the previous CSS tips and tricks.

If you have ever used any customized solution for your background let me know in the comments, I will be happy to find out what more can be done with CSS background image property.

Thank you for reading,
Anna from Duomly


Duomly Programming Online Courses


Original Link: https://dev.to/duomly/discover-7-amazing-tips-and-tricks-about-the-css-background-image-39b0

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To