CSS background image is a property that allows you to add a background image to an element on a webpage. With the various background image properties available in CSS, you can customize the size, position, and repetition of your background images, blend them with other background images or colors, and even adjust their opacity. By using CSS background images strategically and creatively, you can enhance the user experience of your website or web application, communicate your brand identity, and convey your message effectively.
The syntax for the CSS background-image property is:
selector {
background-image: url('path/to/image.png');
}Example:
<!DOCTYPE html>
<html>
<head>
<title>Background Image Example</title>
<style>
body {
background-image: url("https://static.wixstatic.com/media/0f65e1_80dc6da5a5534d04a00317be47e95525~mv2.jpg");
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<h2>This is an example of CSS Background Image</h2>
</body>
</html>Output:
In this example, we set the background-image property to the URL of the image we want to use as the background. We also set the background-repeat property to no-repeat, which means the image will only be displayed once and not repeated. We set the background-size property to cover, which means the image will cover the entire background of the page, even if it needs to be stretched or cropped to fit.
Background Image Properties
Here are some of the most commonly used properties related to background images:
1. background-repeat:
This property controls how the background image is repeated. The possible values are repeat, repeat-x, repeat-y, and no-repeat. For example:
background-repeat: no-repeat;Example:
With repeat property
<!DOCTYPE html>
<html>
<head>
<title>Background Image Example</title>
<style>
body {
background-image: url("https://static.wixstatic.com/media/0f65e1_80dc6da5a5534d04a00317be47e95525~mv2.jpg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>This is an example of CSS Background Image</h2>
</body>
</html>
Without repeat property
<!DOCTYPE html>
<html>
<head>
<title>Background Image Example</title>
<style>
body {
background-image: url("https://static.wixstatic.com/media/0f65e1_80dc6da5a5534d04a00317be47e95525~mv2.jpg");
}
</style>
</head>
<body>
<h2>This is an example of CSS Background Image</h2>
</body>
</html>
2. background-position:
This property sets the starting position of the background image. You can use keywords like top, left, center, or you can use pixel or percentage values. For example:
background-position: center;
background-position: 50% 50%;Example:
<!DOCTYPE html>
<html>
<head>
<title>Background Image Example</title>
<style>
body {
background-image: url("https://static.wixstatic.com/media/0f65e1_80dc6da5a5534d04a00317be47e95525~mv2.jpg");
background-position: center;
}
</style>
</head>
<body>
<h2>This is an example of CSS Background Image</h2>
</body>
</html>
3. background-size:
This property sets the size of the background image. You can use a fixed size, like this:
background-size: 200px 150px;Example:
In this example, i am using only background-size property and i am not using background-repeat property. If you are not using background-repeat property, then the image will be repeated and will be displayed all over the page.
If you don't want to repeat the image, then add "background-repeat: no-repeat;" in the below code.
<!DOCTYPE html>
<html>
<head>
<title>Background Image Example</title>
<style>
body {
background-image: url("https://static.wixstatic.com/media/0f65e1_80dc6da5a5534d04a00317be47e95525~mv2.jpg");
background-size: 200px 150px;
}
</style>
</head>
<body>
<h2>This is an example of CSS Background Image</h2>
</body>
</html>
Or you can use the cover or contain keywords, like this:
background-size: cover;
background-size: contain;4. background-attachment:
This property controls whether the background image scrolls with the rest of the content or stays fixed in place. The possible values are scroll (default) and fixed. For example:
background-attachment: fixed;Example:
In the below code, you will see that the image is fixed. If you scroll down, only the text is moving.
<!DOCTYPE html>
<html>
<head>
<title>Background Image Example</title>
<style>
body {
background-image: url("https://static.wixstatic.com/media/0f65e1_80dc6da5a5534d04a00317be47e95525~mv2.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
color: white; //font color is white
}
</style>
</head>
<body>
<h2>What are flowers?</h2>
<h2>Flowers are one of the most beautiful creations of nature, with their delicate petals, vibrant colors, and sweet fragrances. They have been admired and celebrated by humans for centuries, and have become an important part of many cultures and traditions around the world.
<br><br>Flowers come in a wide variety of shapes, sizes, and colors, and can be found in almost every corner of the planet. They are not only aesthetically pleasing but also play a crucial role in the ecosystem. Flowers are the reproductive organs of plants, and they play a vital role in pollination, helping to ensure the survival of many plant species. They also provide food and habitat for a wide range of insects, birds, and other animals.
<br><br>In addition to their ecological significance, flowers are also deeply symbolic and have been used in art, literature, and religious rituals for centuries. Different flowers have different meanings and associations, and are often used to convey emotions and messages. For example, red roses are commonly associated with love and romance, while lilies are associated with purity and innocence.
<br><br>Overall, flowers are a truly remarkable part of the natural world, with their beauty, diversity, and ecological significance. Whether used for decoration, symbolism, or simply admired for their natural beauty, flowers are a wonderful reminder of the wonders of nature and the power of the natural world to inspire and uplift us.</h2>
</body>
</html>Output:
5. background-color:
This property sets the background color for an element. If the background image doesn't completely cover the element, the background color will show through. For example:
background-color: #fff;Example:
This is a simple example where the background color is added. You can select the color according to your image.
<!DOCTYPE html>
<html>
<head>
<title>Background Image Example</title>
<style>
body {
background-image: url("https://static.wixstatic.com/media/0f65e1_80dc6da5a5534d04a00317be47e95525~mv2.jpg");
background-repeat: no-repeat;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>This is an example of CSS Background Image</h2>
</body>
</html>Output:
Conclusion
When working with background images in CSS, it's important to choose high-quality images that are optimized for web use, test your design across different devices and browsers, and use appropriate fallbacks for users who may not be able to see your background images. With these best practices in mind, you can create stunning and effective background images that elevate your web design to the next level.
Comments