There’s rather a lot we are able to do with the CSS background properties. On this article, we’ll discover tips on how 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 midst of an <article>. (You possibly can learn extra about centering elements with CSS Grid here.) The div measures 300px by 200px.
See the Pen
CSS background-size: Template by Pylogix (@Pylogix)
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 image by Pylogix (@Pylogix)
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 consequence, so let’s see how the background-size property might help us out.
Setting Background Dimensions with background-size
Through the years, new properties have develop into 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 at all times been in a position to do with inline photos.
The background-size property provides a selection of two key phrase values — cowl and comprise — and it could possibly additionally take numerical values with models similar to px, em, and %, together with auto. Let’s have a look at examples of every.
background-size: comprise
The comprise worth forces your complete picture to suit inside its container, although its pure dimensions are bigger than the container.
See the Pen
CSS background-size: Contain by Pylogix (@Pylogix)
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 habits. (Attempt eradicating it to see the picture repeating.)
background-size: cowl
The cowl worth forces the picture to utterly 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 sort of tall, we see its full width however not its full peak.
See the Pen
CSS background-size: Cover by Pylogix (@Pylogix)
on CodePen.
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 are able to’t see, as represented within the picture beneath.
Once 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 share worth of 50%, that is what occurs:
See the Pen
CSS background-size with a single % value by Pylogix (@Pylogix)
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 share 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 share values (50% 50%):
See the Pen
CSS background-size with two % values by Pylogix (@Pylogix)
on CodePen.
Whoah! Now the picture covers 50% of the width of the div, and 50% of the peak — which signifies that its facet 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 are able to experiment with these values within the Pen above … though this method will hardly ever be of a lot use, as a result of it should distort the background picture except we fastidiously 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 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 high left nook of its container. That’s, the default background-position setting seems to be like this:
div {
background-position: left high;
}
The background-position property offers us a whole lot of management over the place our background picture is positioned, and it really works actually properly together 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 a whole lot of blue sky on the high left, so let’s as a substitute place it from the underside proper:
div {
background-size: cowl;
background-position: proper backside;
}
See the Pen
CSS background-size with length values by Pylogix (@Pylogix)
on CodePen.
Along with the assorted mixtures of high, backside, left and proper, there’s additionally heart, which properly facilities the picture. (Attempt changing background-position: proper backside; with background-position: heart; within the Pen above.)
Utilizing background-position with size values
We are able to place our background picture with size values similar to pixels and ems. This enables 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 length values by Pylogix (@Pylogix)
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 appropriate.
We are able to additionally use adverse values to additional nudge and pull our background picture into the specified place.
Utilizing background-position with share values
Utilizing the background-position share values offers us a whole lot of management over our picture positioning, however it may be a bit onerous to grasp. 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 percentage values by Pylogix (@Pylogix)
on CodePen.
So what does 50% imply? 50% of what? It signifies 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 signifies 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 photos are positioned 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 circumstances.
To study extra, try the MDN pages for these properties:
They cowl another choices we haven’t lined right here, similar to tips on how to work with a number of background photos.
Lastly, it’s price 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 How to Use CSS object-fit and object-position to stand up to hurry with them.
