CSS backgrounds enable the styling and customization of website backgrounds. There are several ways to define the appearance of a background in CSS, such as background color, background image, repeating images, gradients, etc. Below are examples of the usage of CSS backgrounds:

You can set the background color in CSS by using the background-color property. For example, if you want to set the background color to white, you can write the following rule:

This rule sets the page background color to white.

You can set a background image using the background-image property in CSS. For example, if you want to set a flower image as the background, you can write the following rule:

This rule sets the background image of the page to a flower image, which is saved in the same folder as the page files.

You can specify a repeating background image in CSS using the background-repeat property. For example, if you want to repeat a flower image both horizontally and vertically in the background, you can write the following rule:

This rule sets the flower image to repeat both horizontally and vertically.

You can define a gradient in CSS by using the background-image property and the gradient function. For example, if you want to set the background from blue to white as a gradient, you can write the following rule:

This rule sets a gradient as the page background, starting from blue and ending with white from bottom to top.

Using CSS backgrounds gives you plenty of opportunities to style and format the backgrounds of web pages. It is important to note that a heavy background image or too many repetitions can slow down the page loading and affect the user experience.

CSS backgrounds enable the styling and customization of website backgrounds. There are several ways to define the appearance of a background in CSS, such as background color, background image, repeating images, gradients, etc. Below are examples of the usage of CSS backgrounds:

## Setting background color

You can set the background color in CSS by using the background-color property. For example, if you want to set the background color to white, you can write the following rule:

```css
body {
  background-color: white;
}
```

This rule sets the page background color to white.

---

## Setting the Background Image

You can set a background image using the background-image property in CSS. For example, if you want to set a flower image as the background, you can write the following rule:

```css
body {
  background-image: url("flower image.jpg");
}
```

This rule sets the background image of the page to a flower image, which is saved in the same folder as the page files.

---

## Setting up a recurring background image

You can specify a repeating background image in CSS using the background-repeat property. For example, if you want to repeat a flower image both horizontally and vertically in the background, you can write the following rule:

```css
body {
  background-image: url("flower picture.jpg");
  background-repeat: repeat;
}
```

This rule sets the flower image to repeat both horizontally and vertically.

---

## 
Defining the Gradient

You can define a gradient in CSS by using the background-image property and the gradient function. For example, if you want to set the background from blue to white as a gradient, you can write the following rule:

```css
body {
  background-image: linear-gradient(to bottom, blue, white);
}
```

This rule sets a gradient as the page background, starting from blue and ending with white from bottom to top.

Using CSS backgrounds gives you plenty of opportunities to style and format the backgrounds of web pages. It is important to note that a heavy background image or too many repetitions can slow down the page loading and affect the user experience.

---

## Practice

@embed 8c9de111d52d


CSS Backgrounds

This course is an introduction to web development and focuses on the basics of HTML, CSS, JavaScript and backend systems. The aim of the course is to provide students with the necessary skills and knowledge to design, develop and understand simple web applications.

This course is an introduction to web development and focuses on the basics of building websites, namely HTML, CSS, JavaScript, and fundamentals of backend systems. The goal of the course is to provide you with the necessary skills and knowledge to design and develop simple full-stack web applications, as well as understand web applications made by others.

In the first part, HTML is studied, which is a markup language used in building websites.


The second part covers the basics of CSS, such as the use of style sheets, rules, selectors, and formatting. It also covers advanced features of CSS, such as animations and responsive design.

In the third part, we will study JavaScript, which is currently an incredibly important tool in both frontend and backend development, and thus also in cybersecurity and ethical hacking.

In the final part, we will learn how to build back-end systems using the Python Flask framework. You will learn the basics of back-end systems, such as using databases, authentication, session management, and access control.

You can do the course exercises on your own computer if you want, but each code example has a button that allows you to directly run the code in the browser and see what the page looks like or what the script prints. So you do not need to install anything, but you can if you want.

It is recommended but optional to create an account on replit.com service. In that case, you can just click "Fork" on the code examples to make a copy for yourself to play with

CSS Backgrounds

Setting background color

Learn to hack — start here