CSS Background Image Property in details

CSS for background image:

CSS Background Image

Using CSS background-image property we can set the background image of an element via the specified URI.

The image is placed on the top left corner, and if the image is opaque, the background-color will not be visible beneath it.

To specify two or more images, separate the URLs using a comma. When we are setting a background-image, at the same we also set a background-color, where possible, in case the background image is unavailable.

Syntax:

background-image: url('url')|none|initial|inherit;

CSS Background-image Value:

The URI value specifies the location where the image will be found.

There is a default setting that value none ensures that no background-image will be displayed, so we do not need to define it explicitly unless we want to override previous background-image declarations.

The value inherits just because of the element to inherit the background-image of its parent. Actually the element’s inherited background image would most likely overlap the parent’s image and this kind of approach would not normally be taken.

Most of the time the parent’s background-image will be visible through the element’s transparent background unless the another background-color or background-image has been set to it.

 

Some Important properties for CSS background Image:

  • background-repeat
  • background-attachment
  • background-position
  • background-size

CSS Background Image:

To set background-image of an element, we can use background-image property. background-image property can be applied to block elements and inline elements.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
  <style>
    div{
      background-image: url(myimg.png);
      width: 300px;
      height: 250px;
     }
    h2{
     color:red;
     text-align: center;
    }
  </style>
</head>
<body>
  <div>
    <h2>This is background Image.</h2>
  </div>
</body>
</html>

Output:
CSS Background Image

 

background-repeat:

Using background-repeat property  we can specify whether and how a background image should repeat. Possible values are:

  • no-repeat – background-image is not repeated. The image will only be shown once
  • repeat-x –the image is repeated only horizontally
  • repeat-y –the image is repeated only  vertically

The following example code that horizontally shows the image.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Background Image</title>
<style>		
  div{
    background-image: url(myimg.png);
    height: 500px;
    width: 700px;
    background-color: #ff6600;
    background-repeat: repeat-x;
  }
  h2{
    color:#fff;
    text-align: center;
  }
</style>
</head>
<body>
   <div>
     <h2>This is background Image: background-repeat: repeat-x</h2>
   </div>
</body>
</html>

The output of the code:

background-repeat

background-attachment:

Actually Css background-attachment property is used with background-image to specify that whether a background image should scroll as the content is scrolled or whether the content should scroll over it.

According to the specification,css background-attachment specifies whether a background image is fixed relative to the browser viewport (e.g., the browser window) or it scrolls along with the document. Possible values are:

  • scroll
  • fixed

Note that this code has a lot of repeated text to enable the scroll feature to appear on the window.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Css background-attachment</title>
<style>
 div{
   height: 300px; 
   width: 400px; 
   overflow: scroll;
   white-space: pre;
   background-color: #ff6ddd;
   background-image: url(myimg.png);
   background-repeat: no-repeat; 
   background-attachment: scroll;
 }
p{
color: #ffffff;
}
</style>
</head>
<body>
  <div>
    <p>
	Css Background attachment property is much important property.
	using Backgroud attachment property we can do somthing different.
	this property is so much interesting.
	Css Background attachment property is much important property.
	using Backgroud attachment property we can do somthing different.
	this property is so much interesting.
	Css Background attachment property is much important property.
        using Backgroud attachment property we can do somthing different.
	this property is so much interesting.
	Css Background attachment property is much important property.
	using Backgroud attachment property we can do somthing different.
	this property is so much interesting.
    </p>
 </div>
</body>
</html>

Output:

If notice you can see the scroll bar on the right side is all the way at the bottom, yet the image is now still in the upper-right corner:

background-attachment

background-position CSS:

Using this property we can specify the location of a background image.

The possible values are:

  • top
  • right
  • bottom
  • left
  • center

This example renders the background image on the right:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Css background position property</title>
<style>
  div{
    height: 300px; width:300px; color: #ffffff;
    background-color: #ff6123;
    background-image: url(myimg.png); 
    background-repeat: repeat-y;
    background-position: right;
   }
</style>
</head>
<body>
  <div>
   <p>
       Css background position property.Css background position property.
       Css background position property.Css background position property.
       Css background position property.Css background position property.
       Css background position property.Css background position property.
   </p>
</div>
</body>
</html>

Output:
background-position CSS

background-size in CSS:

background-size property is introducing in CSS3. The background-size property allows us to control the size of the background image as displayed in its own parent element. We can use any of the following as values for background-size:

  • auto (this a default value)
  • a length, is used to setting the width and height of the background image; e.g., background-size:30px 50px 30px 50px.
  • a percentage is used to set the width and height as a percentage of the parent element; e.g., background-size:30% 30%.
  • cover, it is used to scaling the background image to be as large as possible so that the area of the element is completely covered by the background image; actually some parts of the image may not be shown.
  • center
  • contain, it is used scaling the background image to the largest size so that its width and height fit inside the element.

Using This code we set the background image to a percentage (8% and 80%):

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>background size</title>
	<style>
          div{
	   height: 200px; width: 500px; color: #ffffff;
	   background-color: #ff6600;
	   background-image: url(myimg.png); background-repeat: no-repeat;
	   background-size: 13% 80%;
	  }
	</style>
</head>
<body>
   <div>
      <p>
	   The background size property is used.
	   The background size property is used.
	   The background size property is used.
	   The background size property is used.
	   The background size property is used.
      </p>
   </div>
</body>
</html>

Output:

background-size in CSS

 

Close