Tuesday, April 25, 2017

CSS - Backgrounds


The CSS Background properties used to set various (like used to set an image, color etc.) background of HTML elements. The background is applied to the targeted element.

Following are the CSS background properties:
background-color 
background-image
background-repeat
background-position
background-attachment
background

Set background-color: Used to set the background color of an element.

Example:

<html>

   <head>
   <body>

      <div style = "background-color: green;">
      This is a green background color example</div>

   </body>
   </head>

<html>


Above example will produce the following result:


This is a yellow background color


Set Background Image: Used to set the background image of an element.

Example:

<html>
   <head>
      <style>
         .css-background-demo{
            background-image: url("https://lh3.googleusercontent.com/-ZAWcVTHbtVs/WOZ75whVEjI/AAAAAAAAACw/7FibLpEZbSQJoB6rZ1caf9KM3dPkrj5kwCLcB/h120/LabonStack_Logo.png");
         }
      </style>
      <body>

         <div class="css-background-demo">This is CSS background-images example</div>

      </body>
   </head>
<html>




Above example will produce the following result:


This is an background image example


Set background image - repeat Horizontally or Vertically: By default, background-image property repeats an image both horizontally and vertically.


Example:

<html>
   <head>
      <style>
         div {
            background-image: url("https://lh3.googleusercontent.com/-ZAWcVTHbtVs/WOZ75whVEjI/AAAAAAAAACw/7FibLpEZbSQJoB6rZ1caf9KM3dPkrj5kwCLcB/h120/LabonStack_Logo.png");
                                    background-repeat: repeat;
         }
      </style>
      <body>

         <div>This is CSS background-images repeat example</div>

      </body>
   </head>
<html>

To repeat an image vertically, set background-repeat: repeat-y; and to repeat an image horizontally, set background-repeat: repeat-x;

Set background-position: Set image position and no-repeat: Used to set background position of an HTML elements.


Example of no-repeat:

<html>
   <head>
      <style>
         div {
            background-image: url("https://lh3.googleusercontent.com/-ZAWcVTHbtVs/WOZ75whVEjI/AAAAAAAAACw/7FibLpEZbSQJoB6rZ1caf9KM3dPkrj5kwCLcB/h120/LabonStack_Logo.png");
                                    background-repeat: no-repeat;
         }
      </style>
      <body>
         <div>This is CSS background-images repeat example</div>
      </body>
   </head>
<html>

An Example of image position 1:

<html>
   <head>
      <style>
         div {
            background-image: url("https://lh3.googleusercontent.com/-ZAWcVTHbtVs/WOZ75whVEjI/AAAAAAAAACw/7FibLpEZbSQJoB6rZ1caf9KM3dPkrj5kwCLcB/h120/LabonStack_Logo.png");
                                    background-position: right left;
         }
      </style>
      <body>
         <div>This is CSS background-images position example</div>
      </body>
   </head>
<html>

An example of image position 2:

<html>
   <head>
      <style>
         div {
            background-image: url("https://lh3.googleusercontent.com/-ZAWcVTHbtVs/WOZ75whVEjI/AAAAAAAAACw/7FibLpEZbSQJoB6rZ1caf9KM3dPkrj5kwCLcB/h120/LabonStack_Logo.png");
                                    background-position:100px 200px;
         }
      </style>
      <body>
         <div>This is CSS background-images position example</div>
      </body>
   </head>
<html>

Set Background Attachment: Used to identify whether a background image is fixed or scrolls with the rest of the page.


Example

Note: Try to resize the browser window so you can see scrollbar.

<html>
<head>

<style>
.background-image-fixed-demo {
    background-image: url('https://lh3.googleusercontent.com/-ZAWcVTHbtVs/WOZ75whVEjI/AAAAAAAAACw/7FibLpEZbSQJoB6rZ1caf9KM3dPkrj5kwCLcB/h120/LabonStack_Logo.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
}
</style>

</head>
<body>

 <div class="background-image-fixed-demo">
<p>This is CSS background-images fixed example. Try to scroll down the page. </p>
<p>This is CSS background-images fixed example. Try to scroll down the page. </p>
<p>This is CSS background-images fixed example. Try to scroll down the page. </p>
<p>This is CSS background-images fixed example. Try to scroll down the page. </p>
<p>This is CSS background-images fixed example. Try to scroll down the page. </p>
<p>This is CSS background-images fixed example. Try to scroll down the page. </p>
<p>This is CSS background-images fixed example. Try to scroll down the page. </p>
<p>This is CSS background-images fixed example. Try to scroll down the page. </p>
<p>This is CSS background-images fixed example. Try to scroll down the page. </p>
<p>This is CSS background-images fixed example. Try to scroll down the page. </p>
<p>This is CSS background-images fixed example. Try to scroll down the page. </p>
<p>This is CSS background-images fixed example. Try to scroll down the page. </p>
<p>This is CSS background-images fixed example. Try to scroll down the page. </p>
<p>This is CSS background-images fixed example. Try to scroll down the page. </p>
<p>This is CSS background-images fixed example. Try to scroll down the page. </p>
</div>

</body>

</html>

No comments:

Post a Comment