Scribd
Upload
32 views

Css Background Image

This document provides 7 tips and code examples for using background images in CSS, including fitting images to viewports, using multiple images, creating triangular images, adding overlays and animations, making grid backgrounds, and setting images as text colors.

Uploaded by

duomly
Copyright
© © All Rights Reserved
32 views

Css Background Image

This document provides 7 tips and code examples for using background images in CSS, including fitting images to viewports, using multiple images, creating triangular images, adding overlays and animations, making grid backgrounds, and setting images as text colors.

Uploaded by

duomly
Copyright
© © All Rights Reserved
You are on page 1/ 12

CSS Background

Image Tutorial With


Examples
This content 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 can’t be anything unusual
about background-image, but after a quick
research, I have a different conclusion.

There are lots of questions asked 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.

That’s 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 what’s going on there for you.

And, if as usually if you don’t like


reading, jump to our Youtube channel for
a video version.
CSS background image on Youtube

Let’s check what’s behind the background!


1. How to fit a background image perfectly to a
viewport?
Let’s start from something that’s 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!

https://codepen.io/duomly/pen/xxwYBOE
2. How to use multiple background images with CSS?
Hm, and what if I’d like to add more then
one image in the background?

That’s possible and not very difficult,


but can give a nice result while you’ve
got an idea to mix two graphics into
something beautiful.

I personally think that it’s super useful


when we want to add a pattern on the top
of a background image, so that’s what I
will show you in this example.

Let’s see how it works!

https://codepen.io/duomly/pen/eYpVoJR
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 it’s 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.

Let’s see the code and result!

https://codepen.io/duomly/pen/RwWQmwW
4. How to add a gradient overlay to my background
image?
The fourth trick I’d 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 it’s too
light, and 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.

Let’s see how we can easily add a


gradient overlay to the background image!

https://codepen.io/duomly/pen/rNOJgQE
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.

Let’s see what we can do using background


images and animations in CSS!

https://codepen.io/duomly/pen/gOavNOv
6. How to make a grid background image?
Sometimes it’s 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 don’t know what’s CSS grid


check it out here.

Let’s take a look!

https://codepen.io/duomly/pen/MWaQNWb
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 you’d like to create a
big text header, but not as boring as a
normal color.

Let’s see the stunning effect we can get!

https://codepen.io/duomly/pen/wvKyVjG
Conclusion on CSS background image
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. If you’d 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

Table of contents:
• 1. How to fit a background image
perfectly to a viewport?
• 2. How to use multiple background
images with CSS?
• 3. How to create a triangular
background image?
• 4. How to add a gradient overlay to my
background image?
• 5. How to create a color-changing
background image animation?
• 6. How to make a grid background
image?
• 7. How to set a background image as a
text color?
• Conclusion

You might also like