Web Designing Tutorials

How To Set Background Image or Color Using CSS

Pinterest LinkedIn Tumblr

With background property in CSS, you can set background color or image in HTML element. There are different sub-properties of background property, which are background-color-to set background color, background-image-to set image in a background, background-repeat-to tile image in background when image is smaller than the canvas space, background-attachment-to set an image to scroll or fixed and background-position-to set the position or align of an image. Using short hand property of background, you can specify all of these sub-properties at a time as given below.

Syntax: background: background-color background-image background-repeat background-attachment background-position;
Example: #section1 {background: pink url(back.png) no-repeat fixed 10px 10px;}

How to Set Background Color Using CSS

You can set background color using background-color property. The default value of this property is transparent, which allows any underlying content to show through. You can specify color value in any format for this property.

Syntax: background-color: color|transparent|inherit
Example: #para1{background-color:#00AAFF;}

Demo:

See the Pen zGQGzx by Shuseel Baral (@shuseel) on CodePen.

How to Set Background Image Using CSS

CSS allows to set an image in background using background-image property. This property associates a background image with an element. Content laying under may show through transparent regions in the source image. The background image requires a URL whether complete or relative to link it to the source image specified with the url() syntax. The default value for this property is none which sets the background so that is doesn’t display image.

Syntax: background-image: url(image-url)|none|inherit

Example:

#div1 {background-image: url(background1.gif);}
#div2 {background-image: none;}

Demo:

See the Pen ZGNGyg by Shuseel Baral (@shuseel) on CodePen.

How to Make Background Image to Scroll or not Using CSS

There is a property in CSS called background-attachment property to make background image to scroll or not to scroll with the associated content. The default value for this property is scroll, which sets the background to scroll with the associated content. The alternate value of this property is fixed which is intended to make the background static while associated content such as text scrolls over background. There is a another value called inherit to apply the value of this property from a containing parent element.

Syntax: background-attachment: scroll|fixed|inherit

Example:

div {background-image: url(image1.gif); background-attachment:scroll;}
#para1{background-image: url(image2.gif); background-attachment:fixed;}

Demo:

See the Pen YXbXxQ by Shuseel Baral (@shuseel) on CodePen.

How to Set Background Image Position Using CSS

Background position property determines how a background image is positioned within the canvas space used by its associated element. You can specify the position of the background image “upper-left corner” as an absolute distance in pixels or as an relative distance in percentage along with horizontal and vertical dimensions. The position of the image can be specified as named values for the horizontal axis like left, center and right and vertical axis like top, center and bottom. The default value for an unspecified dimension os assumed to be center.

Syntax: background-position: percentage|length|left|center|right percentage|length|top|center|bottom

Example:

#para1 {background-image: url(imge1.gif); background-position: 20px; 30px;}
#div1{ background-image: url(image2.gif); background-position:5% 10%;}
#position{background-image: url(image3.gif); background-position:top right;}
#position2{background-image: url(image3.gif); background-position:bottom left;}

Demo:

See the Pen BNeNmV by Shuseel Baral (@shuseel) on CodePen.

How to Tile Background Image Using CSS

You can tile background image horizontally or vertically using CSS property background-repeat. This property determines how background images specified by the property background or background-image tile when they are smaller than the canvas space used by their associated elements. The possible value in this property are repeat-which repeats in both direction, repeat-x repeats only horizontally, repeat-y repeats vertically and no-repeat. The default value for this property is repeat.

Syntax: background-repeat: repeat|repeat-x|repeat-y|no-repeat|inherit

Example:

#div1{background-image: url(image1.gif) background-repeat:repeat;}
#div2{background-image: url(image2.gif) background-repeat:repeat-x;}
#div3{background-image: url(image3.gif) background-repeat:repeat-y;}
#div4{background-image: url(image4.gif) background-repeat:no-repeat;}

Demo:

See the Pen vOwOpe by Shuseel Baral (@shuseel) on CodePen.

Read Next:How to Apply Border Color, Style and Width Using CSS

Author

Shuseel Baral is a web programmer and the founder of InfoTechSite has over 8 years of experience in software development, internet, SEO, blogging and marketing digital products and services is passionate about exceeding your expectations.

Comments are closed.