There’s rather a lot we will do with use CSS background properties. On this article, we’ll discover the best way to 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 course of an <article>. (You’ll be able to learn extra about centering parts 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 all the time 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 yellow div.
See the Pen
CSS background-size: Template by SitePoint (@SitePoint)
on CodePen.
The picture under offers a way of the elements 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 might help us out.
Setting Background Dimensions with background-size
Over time, new properties have turn out to be out there for manipulating background photos in CSS, together with background-size. It lets us set the scale of a background picture, simply as we’ve all the time been in a position to do with inline photos.
The background-size property affords a alternative of two key phrase values — cowl and include — and it could additionally take numerical values with models comparable to px, %, em, together with auto. Let’s take a look at examples of every.
background-size: include
The include worth forces your complete picture to suit inside its container, though its pure dimensions are bigger than the container.
See the Pen
CSS background-size: Template with Picture by SitePoint (@SitePoint)
on CodePen.
On this instance, we’ve added the next CSS:
div
background-size: include;
background-repeat: no-repeat;
By default, a background picture will repeat as many instances 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 realm of container, however with out distorting the picture. As a result of our picture has completely different dimensions from the div, a few of it isn’t seen.
See the Pen
CSS background-size: Comprise by SitePoint (@SitePoint)
on CodePen.
We see the entire width of the picture right here, however not your complete top. By default, the highest left nook of the background picture is positioned within the high 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 under.
After we take a look at the background-position property, we’ll discover ways 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 share worth of 50%, that is what occurs:
See the Pen
CSS background-size: cowl 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 share 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 share values (50% 50%):
See the Pen
CSS background-size with a single % worth 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 can not often be of a lot use, as a result of this can distort the background picture until we fastidiously 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 take a look at that subsequent.
Setting the Place of Background Photos with background-position
We’ve seen above that, by default, the highest left nook of our background picture is positioned within the high left nook of its container. That’s, the default background-position setting appears to be like like this:
div
background-position: left high;
The background-position property offers us lots 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 lots of blue sky on the high 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 two % values by SitePoint (@SitePoint)
on CodePen.
Along with the varied combos of high, backside, left and proper, there’s additionally heart, which properly facilities the picture. (Strive changing background-position: proper backside; with background-position: heart; within the Pen above.)
Utilizing background-position with size values
We will place our background picture with size values comparable to pixels and ems. This enables us to push and pull the picture away from the perimeters of the container. For instance:
div
background-size: cowl;
background-position: 20px 2em;
See the Pen
CSS background-position with key phrases 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 may be mixed with key phrase values. For instance, backside 20px proper 2em strikes the picture 20px from the underside and 2em from the appropriate.
We will additionally use adverse values to additional nudge our background picture into the specified place.
Utilizing background-position with share values
Utilizing the background-position share values offers us lots of management over our picture positioning, however it may be somewhat arduous to know. For this demonstration, we’ll take away background measurement and simply work with the pure dimensions of the picture:
div
background-position: 50% 50%;
See the Pen
CSS background-position with size 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 strains by way of the middle of the picture and the middle of the container, these strains will match up, as pictured under.
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 under.
Conclusion
The background-size property is a extremely helpful addition to CSS, and infrequently is useful — particularly when containers change measurement throughout responsive layouts. The background-position property provides additional energy by permitting us to decide on what a part of a background picture is proven inside a container.
There’s much more to find out about these two properties, though what we’ve lined right here will most likely serve the commonest use instances.
To study extra, take a look at the MDN pages for these properties:
They cowl another choices we haven’t lined right here, comparable to the best way to work with a number of background photos.
Lastly, it’s value evaluating the background-size and background-position properties for background photos with the object-fit and object-position properties for inline photos — one other tremendous helpful addition to our CSS toolbox. Take a look at The best way to Use CSS object-fit and object-position to stand up to hurry with them.
Comments are closed.