CSS background

The CSS background property is used to change the background of an element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #mydiv{border: 3px solid coral; padding: 22px;
         background: lightblue;}
   </style>
</head>
<body>
   
   <div id="mydiv">
      <h2>The background Property</h2>
      <p>This is an example of background property in CSS.</p>
   </div>
   
</body>
</html>

Output

The background Property

This is an example of background property in CSS.

Note - Prior to Hypertext Markup Language (HTML) 4, the background of a Web page was set by using the bgcolor attribute of the BODY element. However, from HTML4 onwards, the background is controlled by using Cascading Style Sheet (CSS).

Note - To build a better UI (User Interface) for your web application, you have to get the complete idea, on how to design the background of an element or the whole web page.

CSS background Syntax

The syntax of background property in CSS, is:

background: background-color background-image background-position/background-size background-repeat background-origin background-clip background-attachment;

Therefore, the background property can also be used as shorthand for these properties:

Important - If we include background-size property, then a slash (/) must be included to separate it from the background-position property. For example:

background: url(images/sml-plnt-fl.jpg) 8px 12px/320px 180px;

positioned the background image to 8px from the left and 12px from the top of element. And the size of the image will be 320px wide and 180px high.

CSS background Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #a, #b, #c, #d, #e, #f, #g{border: 4px dotted crimson; height: 240px;
         margin-bottom: 20px; padding: 20px;}
      #a{background: url("images/sml-plnt-lf.jpg") no-repeat border-box;}
      #b{background: url("images/sml-plnt-lf.jpg") 4px 12px/140px 80px no-repeat;}
      #c{background: url("images/sml-plnt-lf.jpg") 4px 12px/140px 80px no-repeat border-box;}
      #d{background: url("images/sml-plnt-lf.jpg") center no-repeat;}
      #e{background: url("images/sml-plnt-lf.jpg") repeat-x;}
      #f{background: url("images/sml-plnt-lf.jpg") 40px 80px no-repeat;}
      #g{background: repeating-conic-gradient(green 10%, black, purple 25%) padding-box;}
   </style>
</head>
<body>
   
   <h3>background: url("images/sml-plnt-lf.jpg") no-repeat border-box</h3>
   <div id="a">
   </div>

   <h3>background: url("images/sml-plnt-lf.jpg") 4px 12px/140px 80px no-repeat</h3>
   <div id="b">
   </div>

   <h3>background: url("images/sml-plnt-lf.jpg") 4px 12px/140px 80px no-repeat border-box</h3>
   <div id="c">
   </div>

   <h3>background: url("images/sml-plnt-lf.jpg") center no-repeat</h3>
   <div id="d">
   </div>

   <h3>background: url("images/sml-plnt-lf.jpg") repeat-x</h3>
   <div id="e">
   </div>

   <h3>background: url("images/sml-plnt-lf.jpg") 40px 80px no-repeat</h3>
   <div id="f">
   </div>

   <h3>background: repeating-conic-gradient(green 10%, black, purple 25%) padding-box</h3>
   <div id="g">
   </div>
   
</body>
</html>

Output