CSS Background (Background Color and Image)
CSS Background Tutorial
CSS Background
In this tutorial of CSS Background, we will learn all the CSS Background elements that’s use to design the HTML documents.
Elements backgrounds can be filled with a color or image, clipped and resize the HTML documents. Now we learn types of background elements of CSS given below.
CSS Background Properties
- background-image
- background-color
- background-repeat
- background-position
- background-attachment
Now we will learn and see the programming examples of all the CSS background properties given above.
Background Image
We use the background image to style the HTML document and give an attractive look.
The background-image property sets one or more image as background of an elements.
The format of its value should be as given:
url(“image.jpg”) Single quotes and no quotes also work such example url(‘image.jpg’) and url(image.jpg) this three methods to insert the image format in CSS. Now we see the programming Example of background image.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example of Color Name</title> <style type="text/css"> body{background-image:url(examplecss.jfif);} </style> <body> <h1>Learn CSS with StydyMuch</h1> </body> </html> |
Output of above example.
 |
Background Image Repeat
In background image repeat property image is repeat one by one. Here CSS automatically reset horizontally and vertically, for repeat Image we use small image in background, we will be understanding with example below.
Programming Example of Image Repeat
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example of CSS Background</title> <style type="text/css"> body{background-image:url(small-car.png);} </style> <body> <h3>Learn CSS with StydyMuch</h3> </body> </html> |
Output of above example
               |
Above example image is repeat vertically and horizontally both.
Background Image Repeat Horizontally
To repeat only horizontally background image, we can use the special property is background-repeat: repeat-x property. Look at below example.
Horizontally-repeating Background Image
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example of CSS Background</title> <style type="text/css"> body {background-image:url(small-car.png); background-repeat: repeat-x;} </style> <body> </body> </html> |
Output of above Example
   |
Above example you can see the car image is repeating only horizontally not all background and vertically.
Background Image Repeat Vertically
To repeat only vertically background image, we can use the special property is background-repeat: repeat-y property. Look at below example.
Vertically-repeating Background Image
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example of CSS Background</title> <style type="text/css"> body {background-image:url(samll-car.png); background-repeat: repeat-y;} </style> <body> </body> </html> |
Output of above example
    |
Above example you can see the car image is repeat only vertically not all background.
Background Image – Set Position
We learned above background image repeat vertically and horizontally but now We will read how to set the background image initial position using the background-position property.
We can set the background image of body in top, left, right, bottom, center, inherit, initial, unset, edge offset value, top left, top right, bottom left, bottom right and put value with percentage and px like top 10px right 20px
etc.
We understand now one example of this background image – set position.
Example of Background Image – Set Position
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example of CSS Background</title> <style type="text/css"> body {background-image:url(samll-car.png); background-position: center; } </style> <body> </body> </html> |
Output of above Programming Example
| |
You can see above programming example we use the background-position:center
property. Similarly, you can use all the positions in the background image of body.
Background Attachment
The background-attachment property sets whether a background images’ positions is fixed within the viewport or scroll with its containing block.
Valid View are given below with description-
- scroll: In this property background is fixed relative to the element itself and does not scroll with its contents.
- Local: When we use this property, background is fixed relative to the element’s contents. If the element has a scrolling mechanism, the background scroll with the website contents, and the background painting area and background positioning area relative to the scrollable area of the element rather than to the border framing them.
- fixed: This property defines background image is fixed relative to the viewport. Even if an element has a scrolling mechanism, the background doesn’t move with the element.
Background Color
Here we learn background color, above we learned background Image.
We can specify a background color for an element using the background-color property. The value can be any valid CSS color.
First, we see the changing the background color of a whole page.
Programming Example;
<!DOCTYPE html> <html lang="en"> <head> <metacharset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example of CSS Background</title> <style type="text/css"> body { background: goldenrod;} </style> <body> <p style="text-align: center;">StudyMuch Learn Coding.</p> </body> </html> |
Output of above example;
 |
Above output of example the background color is changed.
Now we see the changing the color of elements, here we change the color of different elements of HTML.
Example;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example of CSS Background</title> <style type="text/css"> h1{ background-color: chartreuse; } p{ background-color: cadetblue; } div{background-color: darkviolet; width: 400px; height: 500px; } </style> <body> <h1 style="text-align: center;">StydyMuch</h1> <p>StudyMuch, Learn Coding in this website CSS, HTML etc.</p> <div style="text-align: center;">In this tutorial we learned CSS background-color (Background Color and Background Image);</div> </body> </html> |
Output of above Programming Example;
 |
Above example you can see the background color of elements is changed.
Now we see the example of a CSS background, in this example we use all the background property what we just read above.
A CSS Background with following properties,
 |
Example of using all background properties:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example of CSS Background</title> <style type="text/css"> body { background-color: blueviolet; background-image:url("car.png"); background-position: center; background-repeat: no-repeat; background-attachment: scroll; } </style> <body> </body> </html> |
Output of above example
| |
Above you can see the output example background car position is fixed in center and background color is violet color.
In this tutorial we learned the CSS background (Background Image and Background Color), I hope you learned this tutorial with full enjoy. In next tutorial of CSS, we will learn a new topic.
Also Learn-
- Learn CSS Introduction, what is CSS.
- How to create a stylish Contact Form with HTML and CSS.
- Create a Stylish Sign-Up page with HTML and CSS,
- Learn HTML Form Full Tutorial with Example.
- Learn HTML Table full tutorial with Example.
1 Comment
zoritoler imol · July 1, 2022 at 2:33 am
I cherished up to you’ll obtain carried out right here. The sketch is tasteful, your authored material stylish. nevertheless, you command get got an shakiness over that you want be delivering the following. sick for sure come further until now again since exactly the same nearly a lot incessantly inside case you defend this increase.