There’s loads we will do with the CSS background properties. On this article, we’ll discover use the background-size property to set the scale of a background picture, and we’ll additionally discover choices for positioning that background picture with background-position.
Setting Up
For our background picture demos, we’ll use the next picture (of Oia on Santorini, Greece). Its pure dimensions are 400px by 600px.
Right here’s our base CodePen demo, with a <div> centered in the midst of an <article>. (You may learn extra about centering components with CSS Grid right here.) The div measures 300px by 200px.
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 elements of the background picture that aren’t seen outdoors the div.
This clearly isn’t a really satisfying consequence, so let’s see how the background-size property may help us out.
Setting Background Dimensions with background-size
Through the years, new properties have turn out to be obtainable for manipulating background photographs in CSS, together with background-size. It lets us set the scale of a background picture, simply as we’ve at all times been capable of do with inline photographs.
The background-size property affords a alternative of two key phrase values — cowl and comprise — and it will possibly additionally take numerical values with models reminiscent of px, em, and %, together with auto. Let’s take a look at examples of every.
background-size: comprise
The comprise 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: Comprise by SitePoint (@SitePoint)
on CodePen.
On this instance, we’ve added the next CSS:
div {
background-size: comprise;
background-repeat: no-repeat;
}
By default, a background picture will repeat as many occasions as wanted to fill the container, so background-repeat: no-repeat; stops this conduct. (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 attainable however with out distorting it. As a result of the picture is kind 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 will’t see, as represented within the picture beneath.
Once we take 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 will 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 remains 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, that means that the picture retains its pure facet 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 facet ratio is considerably distorted.
We’ll get comparable outcomes if we swap out % for px or different unit values. We may, for instance, do one thing like background-size: 50px 50px, or background-size: 200px 3em and so forth. We are able to experiment with these values within the Pen above … though this strategy will hardly ever be of a lot use, as a result of it’ll distort the background picture except we rigorously choose values that protect its facet ratio.
Of way more use for refining our background picture settings is the background-position property, so let’s take a look at that subsequent.
Setting the Place of Background Pictures 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 seems like this:
div {
background-position: left prime;
}
The background-position property offers us loads of management over the place our background picture is positioned, and it really works actually properly along side 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 loads of blue sky on the prime left, so let’s as an alternative place it from the underside proper:
div {
background-size: cowl;
background-position: proper backside;
}
See the Pen
CSS background-size with size values by SitePoint (@SitePoint)
on CodePen.
Along with the assorted mixtures 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 are able to 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:
div {
background-size: cowl;
background-position: 20px 2em;
}
See the Pen
CSS background-position with size values by SitePoint (@SitePoint)
on CodePen.
Right here, the picture is about to cowl the container, but it surely’s then pushed 20px from the left of the container and 2em from the highest.
Size values may be mixed with key phrase values. For instance, backside 20px proper 2em strikes the picture 20px from the underside and 2em from the best.
We are able to additionally use adverse 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 loads of management over our picture positioning, however it may be just a little exhausting to know. For this demonstration, we’ll take away background dimension and simply work with the pure dimensions of the picture:
div {
background-position: 50% 50%;
}
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 via 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 very helpful addition to CSS, and infrequently is 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 study these two properties, though what we’ve lined right here will most likely serve the commonest use instances.
To study extra, try the MDN pages for these properties:
They cowl another choices we haven’t lined right here, reminiscent of work with a number of background photographs.
Lastly, it’s price 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. Take a look at Methods to Use CSS object-fit and object-position to rise up to hurry with them.
