CSS Background Image, Position, Attachment and Repeat Property

Ad Banner Image

CSS Background Image Property

Background Image is a property to set an image to the background of an HTML Elements.

And background-image property is used to define the background image.

Example 1 – Background Image Example with the body HTML element

<!DOCTYPE html>
<html>
  <head>
    <style>
		body
		{
		 background-image: url("smartphones backgroung image.jpg");
		}
	</style>
  </head>
  <body>
		 
  </body>
</html>

In the above code, we define the background-image to an Elements.

Here, we define background-image to the body.

Background Image with body HTML tag
Fig.1 – Background Image with body HTML tag

CSS Background Repeat Property

CSS Background Repeat property is used where your image size is small so we can tile the image.

Example 2 – Background Repeat Property Application in case of small size images

<!DOCTYPE html>
<html>
  <head>
    <style>
		body
		{
		 background-image: url("smartphones backgroung image.jpg");
		}
	</style>
  </head>
  <body>
		<div>
		
		</div>
		
  </body>
</html>

In the above code, we define the background-image to an HTML Elements. But the size of the image is very small then it will appealing as given below.

CSS Background Repeat automatically in both x and y direction
Fig.2 – Background Repeat automatically in both x and y direction

If the size of the image is small and that image will not repeat then you have to apply background-repeat: no-repeat;

Example 3 – Background Repeat Property Use with no-repeat option and its effect.

<!DOCTYPE html>
<html>
  <head>
    <style>
		body
		{
		 background-image: url("ball.jpg");
		 background-repeat: no-repeat;
		}
	</style>
  </head>
  <body>
		<div>
		
		</div>
  </body>
</html>

In the above code, we define the background-image and background-repeat to an HTML Elements. And the size of the image is small then that image repeat but we set no repeat than it will be shown once.

Background Repeat with no-repeat option
Fig.3 – Background Repeat with no-repeat option and its effect on the web page.

On the given code we apply repeat only on y-axis or vertical.

Example 4 – Background Repeat with repeat-y option

<!DOCTYPE html>
<html>
  <head>
    <style>
		body
		{
		 background-image: url("ball.jpg");
		 background-repeat: repeat-y;
		}
	</style>
  </head>
  <body>
		<div>
		
		</div>
  </body>
</html>

In the above code, we define the background-image and background-repeat on Y-Axis to an HTML Elements. And the size of the image is small then that image repeat only on vertical not show on horizontal.

Background Repeat with repeat-y option and its effect on the web page
Fig.4 – Background Repeat with repeat-y option and its effect on the web page

Caution:Similarly, you can apply background-repeat on x-axis then the image will repeat on the x-axis or horizontal.

CSS Background Position Property

If you want to positioning of the background image than you can use background-position property. Or in other words, to change the position of the background image, then you have to apply background-position : center; . Default position of background image is top-left cornor.

Example 5 – Background Position Property Application to make a image center to the container

<!DOCTYPE html>
<html>
  <head>
    <style>
		body
		{
		 background-image: url("background flower.jpg");
		 background-repeat: no-repeat;
		 background-position: center;
		}
	</style>
  </head>
  <body>
	  <div>
		
	  </div>
  </body>
</html>

In the above code, we define the background-image, background-repeat and background-position to an HTML Elements background-image. And we set the position of the background-image is at centre.

CSS Background Image Position and Attachment Property with center Option
Fig.5 – Background Position Property with center Option

Note:You can change the position of the background-image as your requirement (left, right, bottom, top and center).

CSS Background Attachment Property

If you want to attached image with fixed behavior to a element than you can use background-attachment property. Or in other words, to change to the fixed background image, then you have to apply background-attachment : fixed;

The fixed background image will be fixed, it means it will not scroll as you scroll the web page. The default value of this property is scroll.

Sponsor Banner
You can leave a response, or trackback from your own site.
Leave a Reply to the article


Learn CSS

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!

Powered by Wordpress