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 image multiple:
Background-image: url (“image-path”);
Using an image on a background is simple easy, here am going to apply background image.
Background-image: url (“sslabs-logo.png”);
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 : auto:
Background image will be shown at it’s image original dimensions,
Background-size : 400px 600px:
Background image will be shown at it’s image dimensions like 400px width and 600px height.
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 image will be shown at it’s image dimensions full size and fully visible
Background-size :initial :-
Background image will be shown at its image default dimensions
Background-size :100% 100% :-
Background image will be shown at it’s image dimensions fully 100% width and fully height 100%.
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.
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.
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 .
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 image position default top left corner if you want change background image position you can apply below properties
background image position top it will apply 0% vertically.
background image position right it will apply 100% horizontally.
background image position bottom it will apply 100% horizontally.
background image position center 50% horizontally
Background-position: top right;
background image position top right , top right corner
Background-position: 30% 70%;
background image position 30% 70% it will apply from left 30% from top to 70%.
Background-position: bottom 50px right 200px;
background image position, bottom 50px and right 200px it will apply
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
Background attachment scroll is the default value. It scrolls with the main page, but stay fixed with inside the local view page.
Background attachment fixed is fixed to background it move to the around the window.
Background attachment local is default fixed to background it move to the mail view and local view to the window.
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.