The Background Shorthand Property in CSS


The CSS background shorthand property is used to define a background for an element. background-color, background-image, background-repeat, background-position, background-clip, background-size, background-origin and background-attachment together comprise the CSS background properties.

Syntax

The syntax of the CSS background property is as follows −

Selector {
   background: /*value*/
}

The value can be −

  • background-color − Set the background color

  • background-image − Set the background images

  • background-position − Set the position of the background images

  • background-size − Set the size of the background images

  • background-repeat − Set how to repeat the background images

  • background-origin − Set the positioning area of the background images

  • background-clip − Set the painting area of the background images

  • background-attachment − Set whether the background images are fixed or scrolls

Set the background color

The background color on a web page is set using the background property −

<!DOCTYPE html>
<html>
<head>
   <style>
      body { 
         background: yellow;
      }
   </style>
</head>
<body>
   <h1>Demo Heading</h1>
   <p>I live in India.</p>
</body>
</html>

Set the background image

To set the background image, use the background property and place the image using the url() −

background: rgba(50,100,50,0.4)url("https://www.tutorialspoint.com/data_structures_algorithms/images/data-structure-algorithm.jpg") no-repeat;

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background: rgba(50,100,50,0.4)url("https://www.tutorialspoint.com/data_structures_algorithms/images/data-structure-algorithm.jpg") no-repeat;
      }
   </style>
</head>
<body>
   <h2>Learning is fun</h2>
</body>
</html>

Set the position of the background image

Use the background property to set the background image position on a web page. In this example, the image is placed in the center −

background: rgba(50,100,50,0.4)url("https://www.tutorialspoint.com/data_structures_algorithms/images/data-structure-algorithm.jpg") no-repeat center;

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background: rgba(50,100,50,0.4)url("https://www.tutorialspoint.com/data_structures_algorithms/images/data-structure-algorithm.jpg") no-repeat center;
      }
   </style>
</head>
<body>
   <h2>Learning is fun</h2>
</body>
</html>

Repeating images with the background property

The following examples illustrate CSS background property. In this example, we have set the background image to repeat using the background-repeat under the background shorthand property −

background: linen url("https://www.tutorialspoint.com/images/library-sub-banner.jpg") repeat 40% 20%;

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background: linen url("https://www.tutorialspoint.com/images/library-sub-banner.jpg") repeat 40% 20%;
      }
      div {
         padding: 100px;
         background: rgba(50,100,50,0.4)url("https://www.tutorialspoint.com/green/images/logo.png") no-repeat left;
      }
   </style>
</head>
<body>
   <h2>Learn</h2>
   <ul>
      <li>Java</li>
      <li>C#</li>
      <li>Android</li>
      <li>iOS</li>
      <li>C++</li>
   <li>C</li>
   </ul>
   <div></div>
</body>
</html>

Updated on: 28-Dec-2023

396 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements