1.1 The background-color Property
The background-color property sets the background color for an element. It allows you to set a color fill for the background, providing visual separation of content and enhancing the readability of text and other elements.
Values:
- Color Names: you can use predefined color names, like
red,blue,green - Hexadecimal Values: for example,
#ff0000,#00ff00,#0000ff - RGB: for example,
rgb(255, 0, 0),rgb(0, 255, 0),rgb(0, 0, 255) - RGBA: for example,
rgba(255, 0, 0, 0.5)(semi-transparent red) - HSL: for example,
hsl(0, 100%, 50%),hsl(120, 100%, 50%),hsl(240, 100%, 50%) - HSLA: for example,
hsla(0, 100%, 50%, 0.5)(semi-transparent red).
Example usage:
CSS
.color-red {
background-color: red;
}
.color-hex {
background-color: #3498db;
}
.color-rgba {
background-color: rgba(46, 204, 113, 0.7);
}
HTML
<body>
<div class="color-red">This element has a red background.</div>
<div class="color-hex">This element has a background color set in hexadecimal format.</div>
<div class="color-rgba">This element has a semi-transparent green background.</div>
</body>
Code Explanation:
background-color: red;: sets a red background for the elementbackground-color: #3498db;: sets the background color using a hexadecimal valuebackground-color: rgba(46, 204, 113, 0.7);: sets a semi-transparent green background using RGBA
1.2 The background-image Property
The background-image property sets a background image for an element. It allows you to use images to create visually appealing backgrounds, enhancing the design and perception of a webpage.
The value must be a URL to the image — specify the path to the image that'll be used as the background. For example, url('image.jpg').
Example usage:
.background-url {
background-image: url('https://cdn.codegym.cc/images/article/dfae1c00-4666-48c4-8df5-b2681e01fa8c/800.jpeg');
background-repeat: no-repeat;
border: 2px solid #000;
width: 640px;
height: 320px;
display: flex;
align-items: center;
justify-content: center;
font-family: "Roboto", sans-serif;"
font-size: 16px;
font-weight: 500;
color: white;
}
CSS
.background-url {
background-image: url('./img/background.jpg');
background-repeat: no-repeat;
border: 2px solid #000;
width: 640px;
height: 320px;
display: flex;
align-items: center;
justify-content: center;
font-family: "Roboto", sans-serif;"
font-size: 16px;
font-weight: 500;
color: white;
}
HTML
<body>
<div class="background-url">This element has a background image</div>
</body>
Code Explanation:
background-image: url('./img/background.jpg');: sets the image as the background for the element. In this case, a URL to the image is used
Benefits of using background-image:
- Visual Appeal: using background images allows for more visually interesting web pages.
- Context: background images can provide additional context or information, enhancing the visual perception of the page content.
- Branding: background images can be part of branding, helping maintain a consistent style and site recognition.
Tips for using background images:
- Image Optimization: to improve page performance, it's important to optimize images, reducing their size without significant quality loss
- Cross-browser Support: make sure the images used are displayed correctly in all target browsers
- Alternative Text: for images that are important, provide alternative ways to convey information, such as text descriptions, for users with disabilities
1.3 Combining background-color and background-image
The background-color and background-image properties can be used together to create complex and attractive backgrounds. For example, you can set a background color that's visible if the background image fails to load, or use a color background with a semi-transparent image.
Example usage:
.combined-background {
background-color: lightblue;
background-image: url('https://cdn.codegym.cc/images/article/dfae1c00-4666-48c4-8df5-b2681e01fa8c/800.jpeg');
background-repeat: no-repeat;
background-position: center;
background-size: 610px 290px;
border: 2px solid #000;
width: 640px;
height: 320px;
display: flex;
align-items: center;
justify-content: center;
font-family: "Roboto", sans-serif;"
font-size: 16px;
font-weight: 500;
color: white;
}
CSS
.combined-background {
background-color: lightblue;
background-image: url('.img/background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: 610px 290px;
border: 2px solid #000;
width: 640px;
height: 320px;
display: flex;
align-items: center;
justify-content: center;
font-family: "Roboto", sans-serif;"
font-size: 16px;
font-weight: 500;
color: white;
}
HTML
<body>
<div class="combined-background">
This element has a combined background with an image and a colored background
</div>
</body>
Code Explanation:
background-color: lightblue;: sets the background colorbackground-image: url('.img/background.jpg');: sets the background imagebackground-size: 610px 290px;: sets the size of the background imagebackground-position: center;: centers the background image within the elementborder: 1px solid #000;: adds a border around the element for visual emphasiswidth: 640px;height: 320px;: sets the element's dimensionscolor: white;: sets the text color for better readability on the backgrounddisplay: flex;align-items: center;justify-content: center;: centers the text within the element
GO TO FULL VERSION