CSS Background (Background Color and Image)

Published by StudyMuch on

StudyMuch.in CSS Background

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-

 

Categories: Uncategorized

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.

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *