Introduction:

In this article we are going to explain how to set background-color of html element or how to set background-image of html element by using CSS code with example.

Description:  

CSS background property is used to set the background effects on element. There are 5 CSS background properties that affects the HTML elements:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

Example of background-color:

The background-color property is used to set the background color of the html element.

You can set the background color like this:

<!DOCTYPE html>
<html>
<head>
    <style>
        h2, p {
            background-color: #b0d4de;
        }
    </style>
</head>
<body>
    <h3>My background CSS page.</h3>
    <p>Hello sqltutorialspoint. This is an example of CSS background-color.</p>
</body>
</html>

Output:


how to set background color or image in html

 

Example of background-image:

The background-image property is used to set an image as a background of an html element.

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            background-image: url("good_morning.jpg");
            padding: 50px;
            width:200px;
            height:100px;
        }
    </style>
</head>
<body>
    <div>Hello sqltutorialspoint.com</div>
</body>
</html> 

Output:

 

 how to set background color or image in html


Example of background-repeat-x:

By default, the background-image property repeats the background image horizontally and vertically. Some images are repeated only horizontally or vertically.

The background looks better if the image repeated horizontally only.

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            background-image: url("good_morning.jpg");
            padding: 50px;
            width: 400px;
            height: 300px;
            background-repeat: repeat-x;
        }
    </style>
</head>
<body>
    <div>Hello sqltutorialspoint.com</div>
</body>
</html>

 

Output:


how to set background color or image in html

 

Example of background-repeat-y:


<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            background-image: url("good_morning.jpg");
            padding: 50px;
            width: 400px;
            height: 300px;
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
    <div>Hello sqltutorialspoint.com</div>
</body>
</html> 

Output:

 how to set background color or image in html

 

Example of background-attachment:

The background-attachment property is used to set if the background image is fixed or scroll with the rest of the page in browser window. If you set fixed the background image then the image will not move during scrolling in the browser. Let?s take an example with fixed background image.

<!DOCTYPE html>
<html>
<head>
    <style>
        body {           
            background: white url('good_morning.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <div>Hello sqltutorialspoint.com</div>
</body>
</html>

 

Example of background-position:

The background-position property is used to define the initial position of the background image. By default, the background image is placed on the top-left of the webpage.

You can set the following positions:

  1. center
  2. top
  3. bottom
  4. left
  5. right

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background: white url('good_morning.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center;
        }
    </style>
</head>
<body>
    <div>Hello sqltutorialspoint.com</div>
</body>
</html>


 I hope this article will help to you after reading.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like