There’s so much we will do with the CSS background houses. On this article, we’ll discover tips on how to use the background-size belongings to set the dimensions of a background symbol, and we’ll additionally discover choices for positioning that background symbol with background-position.

Atmosphere Up

For our background symbol demos, we’ll use the next symbol (of Oia on Santorini, Greece). Its herbal dimensions are 400px through 600px.

Right here’s our base CodePen demo, with a <div> focused in the midst of an <article>. (You’ll be able to learn extra about centering parts with CSS Grid right here.) The div measures 300px through 200px.

See the Pen
CSS background-size: Template through SitePoint (@SitePoint)
on CodePen.

The div has a yellow background, and the background symbol will sit down above this yellow background (as background colours all the time sit down underneath any background symbol).

If we merely upload the picture as a background now, we’ll understand that best a part of it’s visual. That’s since the symbol is wider and taller than the div.

See the Pen
CSS background-size: Template with background symbol through SitePoint (@SitePoint)
on CodePen.

The picture underneath offers a way of the portions of the background symbol that aren’t noticed out of doors the div.

This clearly isn’t an overly pleasant outcome, so let’s see how the background-size belongings can lend a hand us out.

Atmosphere Background Dimensions with background-size

Through the years, new houses have grow to be to be had for manipulating background photographs in CSS, together with background-size. It shall we us set the dimensions of a background symbol, simply as we’ve all the time been ready to do with inline photographs.

The background-size belongings provides a collection of two key phrase values — duvet and include — and it might probably additionally take numerical values with devices equivalent to px, em, and %, at the side of auto. Let’s take a look at examples of every.

background-size: include

The include worth forces all the symbol to suit inside of its container, despite the fact that its herbal dimensions are higher than the container.

See the Pen
CSS background-size: Comprise through SitePoint (@SitePoint)
on CodePen.

On this instance, we’ve added the next CSS:

div {
  background-size: include;
  background-repeat: no-repeat;
}

By means of default, a background symbol will repeat as again and again as had to fill the container, so background-repeat: no-repeat; stops this conduct. (Take a look at putting off it to peer the picture repeating.)

background-size: duvet

The duvet worth forces the picture to totally duvet the realm of container, appearing as a lot of the picture as conceivable however with out distorting it. For the reason that symbol is relatively tall, we see its complete width however no longer its complete top.

See the Pen
CSS background-size: Quilt through SitePoint (@SitePoint)
on CodePen.

By means of default, the highest left nook of the background symbol is positioned within the most sensible left nook of the div, so it’s the ground a part of the picture that we will’t see, as represented within the symbol underneath.

After we take a look at the background-position belongings, we’ll learn to specify which a part of the picture is visual.

background-size with different values

Let’s see what different values we will use with the background-size belongings.

If we upload a unmarried share worth of 50%, that is what occurs:

See the Pen
CSS background-size with a unmarried % worth through SitePoint (@SitePoint)
on CodePen.

The background symbol is now 50% of the width of the div, however remains to be taller than the div, so the ground a part of the picture is hidden. So one share worth applies to the x-axis. The y-axis defaults to auto, that means that the picture keeps its herbal side ratio.

Right here’s what occurs if we upload two share values (50% 50%):

See the Pen
CSS background-size with two % values through SitePoint (@SitePoint)
on CodePen.

Whoah! Now the picture covers 50% of the width of the div, and 50% of the peak — because of this that its side ratio is considerably distorted.

We’ll get equivalent effects if we change out % for px or different unit values. Lets, for instance, do one thing like background-size: 50px 50px, or background-size: 200px 3em and so forth. We will experiment with those values within the Pen above … even supposing this means will infrequently be of a lot use, as a result of it’s going to distort the background symbol except we in moderation pick out values that maintain its side ratio.

Of way more use for refining our background symbol settings is the background-position belongings, so let’s take a look at that subsequent.

Atmosphere the Place of Background Pictures with background-position

We’ve noticed above that, through default, the highest left nook of our background symbol is positioned within the most sensible left nook of its container. This is, the default background-position surroundings seems like this:

div {
  background-position: left most sensible; 
}

The background-position belongings offers us numerous regulate over the place our background symbol is positioned, and it really works in reality properly along with background-size: duvet, so we’ll use them in combination within the subsequent couple of examples.

The usage of background-position with key phrases

Our instance symbol has numerous blue sky on the most sensible left, so let’s as an alternative function it from the ground proper:

div {
  background-size: duvet;
  background-position: proper backside;
}

See the Pen
CSS background-size with period values through SitePoint (@SitePoint)
on CodePen.

Along with the quite a lot of mixtures of most sensible, backside, left and proper, there’s additionally heart, which properly facilities the picture. (Take a look at changing background-position: proper backside; with background-position: heart; within the Pen above.)

The usage of background-position with period values

We will function our background symbol with period values equivalent to pixels and ems. This permits us to push and pull the picture clear of the perimeters of the container. For instance:

div {
  background-size: duvet;
  background-position: 20px 2em;
}

See the Pen
CSS background-position with period values through SitePoint (@SitePoint)
on CodePen.

Right here, the picture is about to hide the container, however it’s then driven 20px from the left of the container and 2em from the highest.

Duration values can also be blended with key phrase values. For instance, backside 20px proper 2em strikes the picture 20px from the ground and 2em from the suitable.

We will additionally use adverse values to additional nudge and pull our background symbol into the required function.

The usage of background-position with share values

The usage of the background-position share values offers us numerous regulate over our symbol positioning, however it may be slightly onerous to know. For this demonstration, we’ll take away background length and simply paintings with the herbal dimensions of the picture:

div {
  background-position: 50% 50%;
}

See the Pen
CSS background-position with share values through SitePoint (@SitePoint)
on CodePen.

So what does 50% imply? 50% of what? It implies that the 50% mark of the picture fits the 50% mark of the container. This is, if we draw vertical and horizontal traces in the course of the heart of the picture and the middle of the container, the ones traces will fit up, as pictured underneath.

If we set the background-position to 20% 40%, it implies that a vertical line 20% from the left of the picture fits a vertical line 20% from the left of the container field, and a horizontal line 40% from the highest of the picture fits a vertical line 40% from the highest of the container field, as illustrated underneath.

Conclusion

The background-size belongings is a in reality helpful addition to CSS, and continuously is useful — particularly when bins exchange length throughout responsive layouts. The background-position belongings provides additional energy through permitting us to select how backgrounds photographs are located inside of a container.

There’s much more to be told about those two houses, even supposing what we’ve lined right here will most probably serve the commonest use instances.

To be informed extra, take a look at the MDN pages for those houses:

They duvet another choices we haven’t lined right here, equivalent to tips on how to paintings with a couple of background photographs.

In spite of everything, it’s price evaluating the background-size and background-position houses for background photographs with the object-fit and object-position houses for inline photographs — some other tremendous helpful addition to our CSS toolbox. Take a look at How you can Use CSS object-fit and object-position to stand up to hurry with them.