How to Use Images as Backgrounds with CSS

Using 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 and background-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.

1

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.

2

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.

3

The list of background-size values

This is the complete list of background-size values:

  • auto – Default value.
  • length – As example: 100% auto or 400px 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.

Author

  • Valentin Garcia

    Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

    View all posts
0 0 votes
Article Rating
Subscribe
Notify of
guest

14 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
SimonW
7 years ago

Nice trick ! Especially the “background-size: cover”. Thanks !

htmgarcia
7 years ago
Reply to  Simon

Hey, Simon!

neltek
6 years ago

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?

Carmen
Carmen
6 years ago

Very helpful. I have the same question that ian had back in 2017.

Mike
Mike
6 years ago

Your work is absolutely amazing. Kudos to you man

Pablo
Pablo
4 years ago

I try 
background-image: url(
comment image);

But no showing the image, is correct the code?

Robbie Adair
4 years ago
Reply to  Pablo

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!

sabbir
sabbir
3 years ago
Reply to  robbieadair

thanks

Slovaczech
Slovaczech
4 years ago
Reply to  Pablo

You have to download the img

Irvin
Irvin
4 years ago

Beautiful ✌

william
william
4 years ago

hey Valentin, if i wanted to add a different image to each page how would i go about doing that?

Mike Adair
4 years ago
Reply to  william

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!

grandma
grandma
3 years ago
Reply to  mike@ost

Thank you so much!!!

stjhsrtjhrsjh
stjhsrtjhrsjh
3 years ago

can you tell . how to do with only in html. not in css

14
0
Would love your thoughts, please comment.x
()
x