Learn how to Use CSS background-size and background-position — SitePoint

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

The div has a yellow background, and the background picture will sit above this yellow background (as background colours at all times sit beneath any background picture).

If we merely add the picture as a background now, we’ll discover that solely a part of it’s seen. That’s as a result of the picture is wider and taller than the div.

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

The picture beneath offers a way of the components of the background picture that aren’t seen outdoors the div.

This clearly isn’t a really satisfying outcome, so let’s see how the background-size property will help us out.

Setting Background Dimensions with background-size

Over time, new properties have develop into obtainable for manipulating background photographs in CSS, together with background-size. It lets us set the dimensions of a background picture, simply as we’ve at all times been in a position to do with inline photographs.

The background-size property gives a selection of two key phrase values — cowl and include — and it will probably additionally take numerical values with items reminiscent of px, em, and %, together with auto. Let’s have a look at examples of every.

background-size: include

The include worth forces your entire picture to suit inside its container, though its pure dimensions are bigger than the container.

See the Pen
CSS background-size: Include by SitePoint (@SitePoint)
on CodePen.

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

<code class="css language-css"><span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token property">background-size</span><span class="token punctuation">:</span> include<span class="token punctuation">;</span>
  <span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code>

By default, a background picture will repeat as many occasions as wanted to fill the container, so background-repeat: no-repeat; stops this habits. (Strive eradicating it to see the picture repeating.)

background-size: cowl

The cowl worth forces the picture to fully cowl the world of container, exhibiting as a lot of the picture as doable however with out distorting it. As a result of the picture is sort of tall, we see its full width however not its full peak.

See the Pen
CSS background-size: Cowl by SitePoint (@SitePoint)
on CodePen.

By default, the highest left nook of the background picture is positioned within the prime left nook of the div, so it’s the underside a part of the picture that we are able to’t see, as represented within the picture beneath.

After we have a look at the background-position property, we’ll learn to specify which a part of the picture is seen.

background-size with different values

Let’s see what different values we are able to use with the background-size property.

If we add a single proportion worth of 50%, that is what occurs:

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

The background picture is now 50% of the width of the div, however continues to be taller than the div, so the underside a part of the picture is hidden. So one proportion worth applies to the x-axis. The y-axis defaults to auto, which means that the picture retains its pure side ratio.

Right here’s what occurs if we add two proportion values (50% 50%):

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

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

We’ll get related outcomes if we swap out % for px or different unit values. We might, for instance, do one thing like background-size: 50px 50px, or background-size: 200px 3em and so forth. We will experiment with these values within the Pen above … though this strategy will not often be of a lot use, as a result of it can distort the background picture except we rigorously decide values that protect its side ratio.

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

Setting the Place of Background Photographs with background-position

We’ve seen above that, by default, the highest left nook of our background picture is positioned within the prime left nook of its container. That’s, the default background-position setting appears like this:

<code class="css language-css"><span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token property">background-position</span><span class="token punctuation">:</span> left prime<span class="token punctuation">;</span> 
<span class="token punctuation">}</span>
</code>

The background-position property offers us quite a lot of management over the place our background picture is positioned, and it really works actually properly along with background-size: cowl, so we’ll use them collectively within the subsequent couple of examples.

Utilizing background-position with key phrases

Our instance picture has quite a lot of blue sky on the prime left, so let’s as a substitute place it from the underside proper:

<code class="css language-css"><span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token property">background-size</span><span class="token punctuation">:</span> cowl<span class="token punctuation">;</span>
  <span class="token property">background-position</span><span class="token punctuation">:</span> proper backside<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code>

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

Along with the varied combos of prime, backside, left and proper, there’s additionally middle, which properly facilities the picture. (Strive changing background-position: proper backside; with background-position: middle; within the Pen above.)

Utilizing background-position with size values

We will place our background picture with size values reminiscent of pixels and ems. This permits us to push and pull the picture away from the sides of the container. For instance:

<code class="css language-css"><span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token property">background-size</span><span class="token punctuation">:</span> cowl<span class="token punctuation">;</span>
  <span class="token property">background-position</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">px</span> <span class="token number">2</span><span class="token unit">em</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code>

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

Right here, the picture is ready to cowl the container, nevertheless it’s then pushed 20px from the left of the container and 2em from the highest.

Size values might be mixed with key phrase values. For instance, backside 20px proper 2em strikes the picture 20px from the underside and 2em from the correct.

We will additionally use destructive values to additional nudge and pull our background picture into the specified place.

Utilizing background-position with proportion values

Utilizing the background-position proportion values offers us quite a lot of management over our picture positioning, however it may be a bit of exhausting to grasp. For this demonstration, we’ll take away background dimension and simply work with the pure dimensions of the picture:

<code class="css language-css"><span class="token selector">div</span> <span class="token punctuation">{</span>
  <span class="token property">background-position</span><span class="token punctuation">:</span> <span class="token number">50</span><span class="token unit">%</span> <span class="token number">50</span><span class="token unit">%</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code>

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

So what does 50% imply? 50% of what? It implies that the 50% mark of the picture matches the 50% mark of the container. That’s, if we draw vertical and horizontal traces by way of the middle of the picture and the middle of the container, these traces will match up, as pictured beneath.

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

Conclusion

The background-size property is a extremely helpful addition to CSS, and sometimes turns out to be useful — particularly when containers change dimension throughout responsive layouts. The background-position property provides additional energy by permitting us to decide on how backgrounds photographs are positioned inside a container.

There’s much more to find out about these two properties, though what we’ve lined right here will in all probability serve the most typical use instances.

To be taught extra, try the MDN pages for these properties:

They cowl another choices we haven’t lined right here, reminiscent of the best way to work with a number of background photographs.

Lastly, it’s value evaluating the background-size and background-position properties for background photographs with the object-fit and object-position properties for inline photographs — one other tremendous helpful addition to our CSS toolbox. Try Learn how to Use CSS object-fit and object-position to stand up to hurry with them.