What Are CSS Background Images?
CSS background images are images that are placed behind the content of a container or the entire webpage. This can include anything from a simple color gradient to a complex, high-resolution photograph.
You can use CSS to control the size, position, and repeat of the background image, making it a flexible tool for creating visually attractive websites. For instance, you can use a background image to add texture to a webpage, use it as a branding element, or use it to create a visual narrative that enhances the user’s experience.
Here are a few reasons you might want to stretch or scale a background image:
- To create a specific visual impact by having a large-scale image that conveys a message or emotion related to the content.
- To achieve a responsive design where the background image adapts to different screen sizes or device orientations such as landscape and portrait.
- To minimize the need for multiple images for different sections by using one large image that can be positioned and scaled as needed.
The common way to scale or stretch a background image is through the CSS property background-position. However, before manipulating the positioning, it’s important to understand the role of the background-image property, which sets one or more background images for an element.
By default, a background-image is placed at the top-left corner of an element and repeated both vertically and horizontally. We’ll explain how the background-position property works and show a few techniques for using it to effectively stretch background images, taking into consideration the initial setup provided by the background-image property.
This is part of a series of articles about CSS image
In this article:
- What is the background-image Property?
- What Is the background-size Property?
- 4 Ways to Stretch a Background Image with background-size
- 2 Bonus CSS Background Properties
- Creating Responsive Backgrounds with Cloudinary
What is the background-image Property?
The CSS background-image property plays a crucial role in enhancing the visual appeal of a webpage by allowing the assignment of one or more background images to an element.
This property ensures that the specified image is initially positioned at the top-left corner of the element and, unless otherwise defined, is repeated across both the vertical and horizontal axes to cover the entire background area.
It’s important to note that the “background” in CSS terms encompasses the entire size of the element, including any padding and border, but excluding the margin. A useful practice when working with this property is to also define a background-color. This color serves as a fallback and ensures that the element remains visually consistent and accessible in cases where the background image cannot be loaded or is unavailable, providing a seamless user experience.
Example:
body {
background-image: url(‘images/background.jpg’);
background-color: blue;
}
What Is the background-size Property?
The background-position property in CSS allows you to position the background image. By default, the image is placed at the top-left corner of the element. However, you can change this position to suit your design needs.
The background-position property accepts two values: one for the horizontal position (X-axis) and the other for the vertical position (Y-axis). The values can be lengths, percentages, or keywords (top, right, bottom, left, and center).
Here’s an example:
body {
background-image: url('image.jpg');
background-position: right bottom;
}
In this example, the image will align itself to the bottom-right corner of the body element.
4 Ways to Stretch a Background Image with background-size
Here are a few ways to use background-position to stretch or scale a background image. The sample image can be downloaded from here.
background-image cover property
The cover value of the background-image property scales the image as large as possible and will stretch the image to cover both the width and height of the container, even if it has to lose some parts of the image. The aspect ratio of the image is preserved, so it doesn’t get distorted.
To use the cover value, you need to set the background-size property to cover, like this:
body {
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: cover;
}
In the above code, background-image sets the image you want to use as the background. background-repeat: no-repeat; ensures that the image doesn’t repeat itself. background-size: cover;stretches the image to cover the entire container.
background-image with 100% Width and Height
Another method to stretch a background image in CSS is by setting the width and height to 100%. Unlike the cover method, this method stretches the image to fill the entire width and height of the container. However, this can lead to distortion of the image if its aspect ratio is not the same as the container.
Here’s how you can use this method:
body {
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
min-height: 100vh;
}
In the above code, background-size: 100% 100%; sets the width and height of the image to 100%. Please note that this method might not be ideal for all situations, especially if maintaining the aspect ratio of the image is crucial.
background-image contain property
The background-size: contain; CSS property allows the background image to scale while maintaining its aspect ratio. The image will stretch or shrink to fit within the content box while ensuring that its proportions remain intact. It’s a useful tool to keep your image fully visible without any distortions.
Consider the following CSS code:
body {
background-image: url('image.jpg');
background-size: contain;
background-repeat: no-repeat;
}
The background-size: contain; ensures that the image will cover the entire body of the webpage without distorting its aspect ratio. The image will resize according to the dimensions of the body element, and the background-repeat: no-repeat; ensures that the image doesn’t repeat.
background-image with Viewport Units
Another method to stretch a background image in CSS is by using viewport units. This method is particularly useful when you want the image to cover the entire viewport, regardless of its size. The viewport is the user’s visible area of a web page, and it varies with the device used to view the page.
In CSS, the viewport units are vw (viewport width) and vh (viewport height). 1vw is equal to 1% of the viewport width, and 1vh is equal to 1% of the viewport height. To stretch the background image to cover the entire viewport, you can use 100vw for width and 100vh for height.
Here’s an example:
body {
background-image: url('image.jpg');
background-size: 100vw 100vh;
background-repeat: no-repeat;
}
In this example, background-size: 100vw 100vh; will stretch the background image to cover the entire viewport, both in width and height. The image will adjust itself as the viewport size changes.
2 Bonus CSS Background Properties
Here are two more options for stretching or scaling a background image.
Background Repeat
The background-repeat property controls if and how a background image will repeat. By default, a background image repeats both horizontally and vertically. The property accepts several values, including repeat, repeat-x, repeat-y, no-repeat, and space.
Here’s an example:
body {
background-image: url('image.jpg');
background-repeat: repeat-x;
}
In this example, the image will repeat from left to right across the entire container.
Background Attachment
The background-attachment property determines if a background image will scroll with the rest of the page or stay fixed. The property accepts three values: scroll, fixed, and local.
Here’s an example:
body {
background-image: url('image.jpg');
background-attachment: fixed;
}
In this example, the background image will not scroll with the rest of the page. It will stay fixed at its position.
Creating Responsive Backgrounds with Cloudinary
Cloudinary is a cloud-based service that paves a smooth path towards end-to-end image and video management. It offers an array of capabilities—storage, upload, manipulation, optimization and delivery of media files. For developers striving to give their websites a facelift through striking, optimized images that adapt across devices, Cloudinary fits the bill. Let’s jump into how you can create responsive backgrounds with Cloudinary.
- Leverage Aspect Ratio-Based Containers. You can encode the aspect ratio of an image into a CSS container. This ensures your image fits perfectly, irrespective of the dimensions of the device it’s displayed on.
- Generate Art-Directed Images. Art direction enables developers to manually control how images behave at various breakpoints. You can define the focus area of an image, ensuring vital components are never left out in any viewport size.
- Automate Image Responsiveness. Cloudinary lets you automate the creation of several image versions, allowing perfect display across multiple viewports. Pair these versions with ‘srcset’ and ‘sizes’ attributes in your code for opulent responsive backgrounds.
- Optimal Format and Quality for Faster Load. Cloudinary automatically selects the best quality and format for images based on the browser and network conditions of the end-users. This ensures faster loading times without sacrificing the visual appeal.
Cloudinary acts as a bridge between stunning aesthetics and optimal website performance. So whether you are a seasoned developer aiming to revitalize your website design or a tech enthusiast making your maiden voyage into web development, add Cloudinary to your toolkit.