Backgrounds and colors in CSS

CSS backgrounds and colors

background and color We will learn how to insert colors and backgrounds using CSS. There are some properties that are used to insert colors and backgrounds, namely:

color
background-color
background-image
background-repeat
background-attachment
background-position
background

color property in CSS

The color property classifies this property as one of the html elements, for example we want all the addresses on the page to be in red color.

<body>
	<h1>Programmer Tech</h1>
</body>

And the CSS code will look like

h1 {
	color:#ff2200;
}

And when you run this code in the browser, this title will appear in the command color because we gave it the color property via CSS.

note

Colors can be specified using the Hexa number system as in the previous example or by choosing the color name "red" or by the RGB value which stands for green, blue and red (255.0.0).

background-color property

The background-color property sets the background color of any element such as the body element. It organizes all the contents of the html document. Therefore, to change the background of the entire page, we must activate this property on the body element, and this property can also be activated on any other element such as titles, texts, and others.

We will activate the green color as the background of the page and the CSS code will be like this.

body {
	background-color:#00ff00;
}
h1 {
	color:#ff2200;
}

When the code is run in the browser, the entire page background will be green.

And as this can be specified on any element, in the next example we will use this property on the h1 element that is already inside the html and it will look like this.

body {
	background-color:#00ff00;
}
h1 {
	color:#ff2200;
	background-color:#909090;
}

And when you run the code in the browser, it will be the background of the h1 tag on the page.

backround-image feature

The backround-image property puts the background of any element, and it can be used on the body element to give the background of the entire page, we will give an image on the body element and the code will be in the form

body {
	background-color:#00ff00;
	background-image:url("programmertech");
}
h1 {
	color:#ff2200;
	background-color:#909090;
}

We called an image via background-image and the image was in the working directory so we called it with its name and `extension.

When you run the previous code in browsing, the result will be.

It can also be used on any other element, such as titles, texts, etc. But notice in the image in style.css there too we have given a color, but when calling any image this color disappears, but when any error occurred in the image inside the browser, this color will appear as the background of the page.

background-repeat property

The background-repeat controls the repetition of the image. In the previous example, we noticed how the image was repeated in the browser, but with the use of this feature, you can control the repetition of the image, and this has a set of values to control.

background-repeat: repeat-x.
background-repeat: repeat-y.
background-repeat: repeat-3.
background-repeat: repeat-4.

Example of not repeating the image

body {
	background-color:#00ff00;
	background-image:url("programmertech");
	background-repeat:no-repeat;
}
h1 {
	color:#ff2200;
	background-color:#909090;
}

Here it will only add the background once and will not duplicate the image.

background-attachent property

The background-attachent specifies whether the image is static or animated with the contents of the element. The static image will not move with the text when the reader moves the page to the right. The animation will move with the page with its contents. There are values with this property.

The image moves with the page background-attachent:scroll.
The image is background-attachent:fixed.

background-position property

The property background-position controls the position of the image, the default position of the image is to the left of the page and this property allows to change the default position of the image and take some values.

left.
right.
top.
bottom.
center.

And you can move the image by pixels, for example, to put the image on the right of the page.

body {
	background-color:#00ff00;
	background-image:url("programmertech");
	background-repeat:no-repeat;
	background-position:right;
}
h1 {
	color:#ff2200;
	background-color:#909090;
}

background property

The background property can control all the properties that we explained above. And all this can be controlled by background in one line, we will collect all of the above in one line in an example

body {
	background: #00ff00 url(programmertech.jpg) no-repeat right;
}
h1 {
	color:#ff2200;
	background-color:#909090;
}

When you run the code in the browser, it will collect all the previous properties for us.

Tags: background

Muhammad Alush

إسمي محمد تركي العلوش محب للتقنية و التعلم الذاتي, و جميع خبراتي تعلمتها ذاتياً, و اللغات البرمجية التي أتقنها هي html, css, javascript, php, c, python بالإضافة إلى حبي الكبير لمجال الشبكات.

موقعي programmer-tech.com