--- title: "CSS – Backgrounds" url: https://khanwaseem.com/blog/course/css-backgrounds author: "khan Waseem" published: 2023-09-13 updated: 2023-09-14 topics: ["course", "CSS Tutorial"] description: "Certainly! In CSS, backgrounds play a crucial role in web design, allowing you to style the background of elements such as the entire page, divs, or even specific sections." --- # CSS – Backgrounds Certainly! In CSS, backgrounds play a crucial role in web design, allowing you to style the background of elements such as the entire page, divs, or even specific sections. You can set background colors, images, gradients, and control how they are displayed. Let’s delve into the use of backgrounds in CSS: **1. Background Color:** You can set the background color of an element using the `background-color` property. For example: ```xml Header Background Example

Welcome to My Website

Explore our content and services.

Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/13185457/image-29-1024x170.png) **2. Background Image:** You can use images as backgrounds with the `background-image` property. For instance: ```xml Background Image Example Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/13185620/image-30-1024x349.png) **3. Background Repeat:** You can control how the background image is repeated using the `background-repeat` property: ```xml Document
Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/13182357/image-24.png) **4. Background Position:** Use `background-position` to determine where the background image starts: ```xml Document
Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/13190242/image-31.png) **5. Background Attachment:** The `background-attachment` property controls whether the background scrolls with the content or remains fixed: ```xml Background Attachment Example

Background Attachment Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum eros euismod tincidunt sollicitudin.

Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/13190540/image-32-1024x221.png) **6. Background Gradient:** You can create gradients using the `linear-gradient` or `radial-gradient` functions: ```xml Document
Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/13192031/image-33.png) **7. Background Shorthand:** You can use the `background` shorthand property to set multiple background properties at once: ```xml Background Shorthand Example Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/13195847/image-35-1024x349.png) These are some of the key ways to utilize backgrounds in CSS to enhance the visual appeal of your web pages. By combining these techniques and properties, you can create engaging and aesthetically pleasing designs that make your website more attractive to visitors. ### Related posts: [JavaScript – Events](https://blog.khanwaseem.com/javascript-events/) [CSS – Table](https://blog.khanwaseem.com/css-table/) [CSS – Padding](https://blog.khanwaseem.com/css-padding/) [CSS – Pseudo Classes](https://blog.khanwaseem.com/css-pseudo-classes/) Powered by [YARPP](https://yarpp.com).