Css Background Image

CSS Background Image

Using CSS we can apply background-image, and this property we can sets one or more background images for any element.

When we apply by default it will be placed at the top-left corner of an element, and repeated both vertically and horizontally.

When we are applying background- image we need to remember few more background properties like below,

  • Background-image: url (“image-path”);
  • Background-size:
  • Background-repeat:
  • Background-position:
  • Background-attachment:
  • Background image multiple:

Background-image: url (“image-path”);

Using an image on a background is simple easy, here am going to apply background image.

Body

{

Background-image: url (“sslabs-logo.png”);

}

Background-image

 

Background-size:

Table of Contents

Background-size: 500px;

Background-size: auto;

Background-size: 500px;

Background-size: 400px 600px;

Background-size: cover;

Background-size: contain;

Background-size: initial;

Background-size: 100%  100%;

The BACKGROUND-SIZE Property Is Specified In One Of The Following Ways

Background-size : 500px: 
background image will be shown at it’s dimensions like 500px (width),500px(height)

Background-size : 500px

Background-size : auto:

Background image will be shown at it’s image  original dimensions,

Background-size : auto

Background-size : 400px 600px:

Background image will be shown at it’s image  dimensions like 400px width and 600px height.

Background-size 400px 600px

Background-size :cover :

Background image to cover the entire container, even if it has to stretch the image and it will take 100% width or cut a little bit off one of the edges

Background-size cover

Background-size :contain:-

Background image will be shown at it’s image  dimensions full size and fully visible

Background-size contain

Background-size :initial :-

Background image will be shown at its image default dimensions

Background-size initial

Background-size :100% 100% :-

Background image will be shown at it’s image  dimensions fully 100% width and fully height 100%.

Background-size 100% 100%

  • Background-repeat:

When you are insert background image default that image repeat horizontally and vertically. If you don’t want repeat background image you can apply below properties.

Table of Contents

Background-repeat: no-repeat;

Background-repeat: repeat-x;

Background-repeat: repeat-y;

Background-repeat: no-repeat;

Generally when we insert background image  that size may be small it will repeat horizontally and vertically .so when you apply this property background-repeat : no-repeat;

That background image could not repeat.

Background-repeat no-repeat

 

 

Background-repeat: repeat-x;

Generally when we insert background image  that size may be small it will repeat horizontally and vertically .so when you apply this property background-repeat : repeat-x;

That background image could repeat horizontally .

Background-repeat-repeat-x

Background-repeat: repeat-y;

Generally when we insert background image  that size may be small it will repeat horizontally and vertically .so when you apply this property background-repeat : repeat-y;

That background image could repeat vertically .

Background-repeat-repeat-y

  • Background-position:

background image position default top left corner if you want change background image position you can apply below properties

Table of Contents:

Background-position: top/right/bottom/left;

Background-position: center;

Background-position: top  right;

Background-position: 30%  70%;

Background-position: bottom 50px right 200px;

Background-position: top;

background image position top it will apply 0% vertically.

Background-position-top

Background-position: right;

background image position right it will apply 100% horizontally.

Background-position-right

Background-position: bottom;

background image position bottom it will apply 100% horizontally.

Background-position-bottom

Background-position: center;

background image position center 50% horizontally

Background-position-center

Background-position: top right;

 background image position top right  , top right corner

Background-position-right

Background-position: 30%  70%;

background image position 30% 70% it will apply from left 30% from top to 70%.

Background-position-30% -70%

Background-position: bottom 50px right 200px;

background image position, bottom  50px  and right 200px it will apply

Background-position-bottom-50px-right-200px

  • Background-attachment:

The background-attachment property is specifies how to move the background relative to the page.

There are three values: scroll, fixed, and local. The best way to explain below methods

Table of Contents

Background-attachment: scroll;

Background-attachment: fixed;

Background-attachment: local;

Background-attachment: scroll;

Background attachment scroll is the default value. It scrolls with the main page, but stay fixed with inside the local view page.

Background-attachment-scroll

Background-attachment: fixed;

Background attachment fixed is fixed to background it move to the around the window.

Background -attachment -fixed

Background-attachment: local;

Background attachment local is default fixed to background it move to the mail view and local view to the window.

Background-attachment-local
Background image multiple:

You can apply multiple backgrounds to elements. These are layered a top one another with the first background you provide on top and the last background listed in the back.

Background-image:url(“image-path-1”),url(“image-path-2”);

Background- image-multiple

This Post Has One Comment

  1. Very informative and helpful guide .
    I have read few of your blog posts and found all of them interesting and useful .
    Keep blogging !! Thanks !!

Leave a Reply

Close Menu