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.
The best way to make the background transparent is to use the transparent image with an alpha channel. There are alternative ways to achieve this opacity using CSS properties and filters. Let’s consider the following case to understand various techniques for making background transparent.
Structure
We'll use a simple structure and add an image as a background placeholder. We'll try to overlay a div block and apply transparency to the block using various colors and images.
here is how HTML structure will look like:
<div class="wrapper">
<img alt="" src="bathroom-bg.png" />
<div class="background"></div>
</div>We're using a simple relatively positioned wrapper and an image that will act as a background placeholder.
the class background is what we use as our main layer. The CSS code will look like this:
.wrapper{position: relative;}
.background{ position:absolute; width: 28%;height: 48.6%;left: 36%;top: 23.2%; background:white;}This will place a white solid on top of our image.
Using Opacity Filter
Now let's add a filter to make the layer transparent.
.background{background: #feefc3; filter: opacity(0.9);}opacity filter can make the entire element transparent. meaning child within the div element will be transparent.
Using Opacity Property
opacity can be used good old property way. where we just specify numbers between 0-1 and the layer becomes transparent.
.background{background: #feefc3; opacity:0.9;}The result will be exactly same as the opacity filter.
Using Transparent Colors
Transparency is also available in colors. The main benefit is the color itself is transparent and not the element. This will allow the inside element to stay opaque while the background remains transparent.
.background{background: rgb(254 239 195 / 87%);}the color syntax can be any of supported color with alpha. That is: rgba / hasla
Using CSS Gradients
CSS Gradients can be another form of transparent background. One can create transparent gradient using transparent colors like this:
.background{background: linear-gradient(0,rgb(254 239 195 / 10%),rgb(254 239 195 / 100%));}This will enable gradients in the background.
Using Images with Alpha
The simplest and most effective way is just to use transparent background images. PNG and WEBP support alpha channels.
.background{background: url(window.png) center/cover;}What you'd see using the image:
This technique is applicable for any kind of element or pseudo-element. we can mix and match these techniques and use multiple images to adjust the entire composition.