If you want to place any image in the background that’s pretty easy. If you want to focus on some point of the image that adds a bit of complexity to CSS code. If you want to manipulate the size, that’s more complex. Considering no image can fit all the screen sizes.
We'll consider a case of sizing background image in a body (full screen) and inside a container.
To understand the sizing, we'll always take the image position as a center. This can be changed depending on the image.
Setting background size on a full-screen window.
We'll make body 100% so that we can use an image. This is how basic html looks like:
<!DOCTYPE HTML>
<html lang="en">
<head></head>
<body></body>
</html>The style portion will just have HTML and body reset plus a background image with center position and no repetition:
html,body{
height: 100%;
margin:0;
padding:0;
}
body{
background: url(earhy-lady.jpg) no-repeat center center;
}This will just output the image in the body. Not really convincing right?
This is because the background image is in its default scale. We may want to size it so it looks good at least in the desktop. This is how it looks after using background size.
/* This will size the image to full width */
body{
background-size:cover;
}
We can size it fit height by changing code as follows:
/* This will size the image to full height */
body{
background-size:contain;
}It is not ideal to use full-height or full-width images. It is ideal for background images where it is okay to have your image chopped at some points.
We can set a background-position property to the place where we want to set a focus when the viewport resizes.
Background Image Fixed and Percentage Size:
The background-size can have fixed or percentage sizes. This will allow good old stretching of the image. Love it, hate it, there is a technique to break the aspect ratio if you want to use it. It does not always look good.
We'll just try to manipulate the background width to demonstrate how it works. This will break the aspect ratio.
/* This will re-size the image in by 400px in x direction 200px in y direction */
body{
background-size:400px 200px;
}This can be done it both the x and y-axis.
/* This will re-size the image in by 400px in y direction 200px in x direction */
body{
background-size:200px 400px;
}What if we want to size the background image inside a container?
All the techniques that are applicable to the body are globally applicable for any element for example logo set. We may need to use a percentage size so that images like logos do not get chopped off because of background sizing.
Basic rule of image resizing looks like this:
/* Setting up a basic grid */
.logo-container{
display:grid;
grid-colum-template:1fr 1fr;
grid-gap:10px;
}
.logo{
background-size: auto 70%;
}This size will work considering most of the logos will have some rectangular ratio. Loos with portrait size will be cropped because of sizing in the x-direction.
For more portrait images, we just need to use a better background size. The height will be greater than 70% to have the complete image in the box.
.logo{
background-size: 70% auto;
}This will produce the below output.
Photo by Sajad Nori, Omid Armin on Unsplash
https://unsplash.com/photos/ceoOtd3U5zs
https://unsplash.com/photos/_8rh7LPA4mE
Will these sizes work for responsive layouts?
the answer is it depends. If it is contained in some kind of container that holds its aspect ratio, the image will look good on all devices. However, if the image is used as background decoration, It may get cropped depending on the size of the viewport.