How to Use Images as Backgrounds with CSS
As a new web designer, one very skill you’ll need to master is using background images.
Depending on the design, you may need to completely fill a CSS container with an image, or sometimes the image will just partially fill the container.
In this post, we’ll show you three examples, using the CSS property background-size
.
Base CSS
To display an image as background within a container, you need this sample CSS:
{codecitation css}.container-class {
background-image: url(“path/to/image.jpg”);
background-repeat: no-repeat;
background-position: center;
width: 400px;
height: 400px;
border: 2px dashed #333;
}{/codecitation}
- Replace
.container-class
with the selector you want to target. border
andbackground-position
properties are optional. We use them here to showcase the different results we’ll display below.
To define a specific size for the image, we’re missing the background-size
property. Let’s talk about that in the next steps.
Example #1. Full width background, but no full height
In this case, we are using an image which is higher than it is wide.
Include the syntax below to make the background image go full width:
{codecitation css}background-size: 100% auto;{/codecitation}
In tthis example, notice how the image only covers the width, but not the height.
Example #2. Full height background, but no full width
In this case, we are using an image with bigger height than width.
Include the syntax below to make the background image go full height:
{codecitation css}background-size: auto 100%;{/codecitation}
In this example, notice how the image only covers the height, but not the width.
Example #3.. Full background
Include this syntax to make the background image go full. This is an automatic way to fill the complete container, no matter the image’s aspect ratio:
{codecitation css}background-size: cover;{/codecitation}
In this example, notice how the image covers the container. There are no empty spaces.
The list of background-size values
This is the complete list of background-size
values:
auto
– Default value.length
– As example:100% auto
or400px auto
. The first value is for the width, the second for the height.cover
– Cover the complete area.contain
– Scale the image to its biggest size.initial
– Set this propery to its default.inherit
– Inherited from the parent.
Nice trick ! Especially the “background-size: cover”. Thanks !
Hey, Simon!
So did you use the same image for all 3 examples? And are there any hints on original image to use i.e. should it be bigger than the area to fill or what are the best choices?
Very helpful. I have the same question that ian had back in 2017.
Your work is absolutely amazing. Kudos to you man
I try
background-image: url(
);
But no showing the image, is correct the code?
Pablo,
Please try:
[code]background-image: url(“https://cdn1.photostockeditor.com/c/1512/cup-green-teapot-pouring-red-liquid-to-white-teacup-closeup-photography-beverage-beverage-image.jpg)”);[/code]
Let us know if that works for you!
thanks
You have to download the img
Beautiful ✌
hey Valentin, if i wanted to add a different image to each page how would i go about doing that?
william,
If the background you want to change has the same class name on different pages, you will need some other selector to target the class and give it a new background. The easiest way is to have an id or class for a parent element like a body or a div with a unique id or class, or you can just add another class or id on the div where the background is being styled on each page.
[url=https://codepen.io/OSTraining/pen/PoZambK]Click here for an example.[/url] I illustrated both ways suggested above.
The simple answer, there will need to be a unique selector for each different background you would like the style.
Let me know if this helps!
Thank you so much!!!
can you tell . how to do with only in html. not in css