CSS Introduction

CSS Tutorial What is CSS CSS Syntax CSS Selector How to include CSS CSS Comments

CSS Attributes

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Color CSS Hover CSS Important CSS Line-height CSS Margin CSS Opacity CSS Filter CSS Images CSS Overflow CSS Padding CSS Position CSS Vertical align CSS White space CSS Width Word-wrap in CSS Box-shadow in CSS Text-transform in CSS CSS Outline CSS Visibility CSS Counters CSS Clear fix CSS Icons CSS Justify-content Text-decoration in CSS CSS Lists CSS nth selector CSS Sticky CSS Background-clip CSS Checkbox-style CSS Letter-spacing CSS Navigation bar CSS Overlay CSS Root CSS Specificity CSS Text-indent CSS Text-stroke CSS Zoom CSS Order CSS Descendent selector CSS Clip CSS calc() CSS Background-blend-mode CSS radio-button CSS Superscript and subscript CSS Text-effects CSS Text-align CSS Variables CSS Page-break-before CSS Page-break-inside CSS Page-break-after CSS Content property CSS Word-spacing CSS Animation CSS @keyframes rules CSS Pseudo-classes CSS Pseudo-elements CSS Radial-gradient CSS Translate CSS Gradients CSS z-index CSS Loaders CSS Units CSS Transition CSS Masking CSS Arrow CSS Pagination

Misc

What is Bootstrap CSS What is CSS used for Difference between HTML and CSS How to center a table in CSS What is a CSS File How to center a button in CSS How to change background color in CSS How to change the font in CSS How to change font size in CSS How to resize an image in CSS How to get rid of bullet pioints in CSS Is CSS a programming language Grid Vs Flexbox in CSS How to edit CSS in WordPress How to use google fonts in CSS

CSS Background

CSS Background

The properties of CSS background are applied to describe the effects of background on the element. Here are five properties of background that affects various elements of HTML:

  • Background-color
  • Background-image
  • Background-repeat
  • Background-attachment
  • Background-position

Background-color

The color of the background element is specified by using this property. An example for setting background-color is given below:

Example:

<!DOCTYPE html> 
  <html> 
  <head>  
 <style>   body {   background-color: orange;   }   </style>  
 </head> 
  <body>  
 <h1> Hello! </h1>  
 <p> This page has an orange background color!   </p>  
 </body>  
 </html>    
CSS Background

Background-image

When we want to insert an image as the background of HTML element, we can use background-image property. The image will be repeated and will cover all the elements.  An example of adding image in background is as follows:

Example:

 <!DOCTYPE html>  
 <html>  
 <head>  
 <style>   body {   background-image: url("paper.gif");   }   </style>  
 </head> 
  <body> 
  <h1> Hello! </h1>  
 <p> This page has an image as the background!   </p>  
 </body>  
 </html>    
CSS Background

Background-repeat

As discussed in the background-image property, background-image repeats the image vertically and horizontally. A few images in the background are repeated both vertically and horizontally. But, the background appears better when the image has horizontal repetition only.

Example: repeat-x;

<!DOCTYPE html>  
 <html>  
 <head>  
 <style>   body {   background-image: url("gradient_bg1.png");   background-repeat: repeat-x;   }   </style>  
 </head>  
 <body>  
 <h1> Hello Users! </h1>  
 <p> This image will be repeated only   horizontally! </p>   
</body> 
</html>    
CSS Background

Example: repeat-y;

 <!DOCTYPE html> 
  <html>  
 <head>   
<style>   body {   background-image: url("gradient_bg1.png");   background-repeat: repeat-y;   }   </style>   
</head>  
 <body>  
 <h1> Hello Users! </h1>  
 <p> This image will be repeated only vertically!   </p>  
 </body>  
 </html>    
CSS Background

Background-attachment

It is applied to define the background image, which is scroll or fixed with the page rest in the browser window. When we fixed the image in the background, the image can’t move at the time of scrolling inside the browser. The following example will clear this concept.

Example: fixed

 <!DOCTYPE html>   
<html>  
 <head> 
  <style>   body {   background-image: url("tree.png");   background-repeat: no-repeat;   background-attachment: fixed;   margin-left: 550px;   }   </style>  
 </head>  
 <body>  
 <h1> The background-attachment property   </h1>  
<p> This property will specify that the image in   the background should scroll or be fixed. </p> 
  <p> This property will specify that the image in   the background should scroll or be fixed. </p>  
 <p> This property will specify that the image in   the background should scroll or be fixed. </p>  
 <p> This property will specify that the image in   the background should scroll or be fixed. </p> 
  <p> This property will specify that the image in   the background should scroll or be fixed. </p>   
<p> This property will specify that the image in   the background should scroll or be fixed. </p>   
<p> This property will specify that the image in   the background should scroll or be fixed. </p> 
  <p> This property will specify that the image in   the background should scroll or be fixed. </p> 
  <p> This property will specify that the image in   the background should scroll or be fixed. </p> 
  <p> This property will specify that the image in   the background should scroll or be fixed. </p> 
  <p> This property will specify that the image in   the background should scroll or be fixed. </p> 
  <p> This property will specify that the image in   the background should scroll or be fixed. </p>  
 <p> This property will specify that the image in   the background should scroll or be fixed. </p>  
 <p> This property will specify that the image in   the background should scroll or be fixed. </p>  
 </body>  
 </html>    
CSS Background

Example: scroll

<!DOCTYPE html>  
 <html>  
 <head>  
 <style>   body {   background-image: url("tree.png");   background-repeat: no-repeat;   background-attachment: scroll;   margin-left: 550px;   }   </style>  
 </head>  
 <body>   <h1> The background-attachment property   </h1>  
 <p> This property will specify that the image in   the background should scroll or be fixed. </p>   
<p> This property will specify that the image in   the background should scroll or be fixed. </p>   
<p> This property will specify that the image in   the background should scroll or be fixed. </p>   
<p> This property will specify that the image in   the background should scroll or be fixed. </p>  
 <p> This property will specify that the image in   the background should scroll or be fixed. </p>   
<p> This property will specify that the image in   the background should scroll or be fixed. </p>  
 <p> This property will specify that the image in   the background should scroll or be fixed. </p>  
 <p> This property will specify that the image in   the background should scroll or be fixed. </p>  
 <p> This property will specify that the image in   the background should scroll or be fixed. </p> 
  <p> This property will specify that the image in   the background should scroll or be fixed. </p>  
 <p> This property will specify that the image in   the background should scroll or be fixed. </p>  
 <p> This property will specify that the image in   the background should scroll or be fixed. </p> 
  <p> This property will specify that the image in   the background should scroll or be fixed. </p> 
  <p> This property will specify that the image in   the background should scroll or be fixed. </p> 
  </body> 
  </html>     
CSS Background

Background-position

This property of CSS is applied to describe the basic position of an image in the background. A background picture is positioned on the top-left side of the webpage. We can arrange some positions by using the above property as follows:

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

Example: center

    <!DOCTYPE html>  
 <html>  
 <head>  
 <style>   body {   background-image: url("flower.gif");   background-repeat: no-repeat;   background-attachment: fixed;   background-position: top;   }   </style>  
 </head> 
  <body> 
  <p> This is an example for setting the position   of background image. This image is fixed. Please scroll the page. </p>  
 <p> This is an example for setting the position   of background image. This image is fixed. Please scroll the page. </p> 
  <p> This is an example for setting the position   of background image. This image is fixed. Please scroll the page. </p> 
  <p> This is an example for setting the position   of background image. This image is fixed. Please scroll the page. </p>  
 <p> This is an example for setting the position   of background image. This image is fixed. Please scroll the page. </p> 
  <p> This is an example for setting the position   of background image. This image is fixed. Please scroll the page. </p>  
 <p> This is an example for setting the position   of background image. This image is fixed. Please scroll the page. </p> 
  <p> This is an example for setting the position   of background image. This image is fixed. Please scroll the page. </p>  
 <p> This is an example for setting the position   of background image. This image is fixed. Please scroll the page. </p>  
 <p> This is an example for setting the position   of background image. This image is fixed. Please scroll the page. </p>  
 <p> This is an example for setting the position   of background image. This image is fixed. Please scroll the page. </p> 
  <p> This is an example for setting the position   of background image. This image is fixed. Please scroll the page. </p>  
 <p> This is an example for setting the position   of background image. This image is fixed. Please scroll the page. </p>  
 <p> This is an example for setting the position   of background image. This image is fixed. Please scroll the page. </p> 
</body>  
</html>     
CSS Background



ADVERTISEMENT
ADVERTISEMENT