Search within TutorialsPark

CSS Background


Use CSS to have great Background for your webpages, with various variations.


CSS Background

With new CSS3 specifications, there are in all nine Properties to control the Background of your Webpage, as mentioned below.

Tables: CSS Background Properties

Property Description Value
background-color To Define the background color of an element. color(hex, RGBa, HSL)
transparent(default)
background-image To set the background image(s) of an element
url(image)
none(default)
background-repeat To set the repeat style of the background pattern repeat-x
repeat-y
repeat
space
round(default)
no-repeat
background-size To define the size of the background image
contain
cover
auto(default)
background-position To set the position of the background image top
left
right
bottom
center
background-attachment To define the attachment style of background image. i.e fixed or scrolling. fixed
local
scroll(default)
background-clip To define the clipping style for background images border-box(default)
padding-box
content-box
background-origin To define the point from which the background position is measured. border-box
padding-box(default)
content-box
background A shorthand to define all background setting in a single declaration

Demo: CSS Background Color

Get your facts first, then you can distort them as you please.

background-color:

Note: The background by default is transparent has color of the parent element

CSS Background: Background Color

1.You can set the color of an element's background using CSS property background-color. By default the background is transparent and background of the parent element is visible.

2. Background color can be specified using hex codes, color keywords, rgba() and hsla() and even a combination of these

Example: CSS - background-color

Give it a TRY! » Note: The hex-color code can be either 3 digit or 6 digit.


CSS Background: Background Image

The five essential entrepreneurial skills for success: Concentration, Discrimination, Organization, Innovation and Communication.

background-image:

1.You can set any image as element's background using CSS property background-image. It accepts two values .

url() : The path of the background image is specified in parentheses. Eg: url(/path/image.png)

none : No Background Image. Its the default value

Example: CSS background-image

Give it a TRY! » Note: Incase the image is smaller than the background then it gets tiled along x or y axis .


Background Image: Repeat X(horizontal) and Repeat Y(Vertical)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

background-repeat:

1.For images smaller than the background, it can be repeated to to fill the background, the pattern of the tiling can be defined using background-repeat property

The value of the background-repeat are as follows:

repeat : The image is repeated both vertically and horizontally. Its the default value.

repeat-x : The image is tiled horizontally(x-axis) only

repeat-y : The image is tiled vertically(y-axis) only

no-repeat : Displays the image only once.

Example:CSS Background : Background-repeat

Give it a TRY! » Note: The background-repeat property can be used to create horizontal and vertical gradients with images .


CSS Background : Background Image Size

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

background-size:

1. While using images as the background you can control it size using background-size property.

2. The possible values for background-size are as follows:

length values : Specify the background-size in length units. The order is first width and second height. eg:10px(W) 20px(H). If only one value is specified the other is set to auto.

percentages value : Specify the background-size in percentages. The percentage values are w.r.t to the sizes of parent element. Order of values is width(first) and height(second).

contain : Fits image to the width and height of the element containing it.And aspect ratio is preserved.

cover : Scales the images to fit the complete image in the specified area, and the aspect ratio is preserved.

auto : The image is displayed at full size. Its the default value.

Example: CSS Background: background-size

Give it a TRY! » Tip: Disable background-repeat while using this feature.


CSS Background : background-position

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

background-position:

1. The exact position of the background image can be set using the property of background-position.

2. The position of the images is specified as one or two values seperated by a space. Eg: (5% 20%), (30px 40px), (top center). If a single value is specified then other value is "center"

The possible values of background-position are as follows:

top : The image is positioned at the top edge.

left : The image is positioned at the left edge.

right : The image is positioned at the right edge

bottom : The image is positioned at the bottom edge

center :The image is positioned at the center edge

You can also use length values (px) or pecentage values. Eg: (20px 40px) or (3% 5%).

Example: CSS Background : background-position

Give it a TRY! » Note: In the above demo, the image is positioned at 120px from left edge and 80px from the top edge .


CSS Background : background-attachment

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

background-attachment:

Note: Scroll the viewport content after applying each value to see the difference .

1. You can specify the way the background is attached to the content using background-attachment property.

2. This property is useful when the element has a viewport and can be scrolled.

The possible values of background-attachment are as follows:

fixed : The background image is fixed with the viewport.

local : The background image is fixed with the content. Hence, moves with the content when scrolled.

scroll : The background image is fixed with the element and does not scroll with the content

Example: CSS Background : background-attachment

Give it a TRY! » Note: To be used only of the content is within a viewport .


CSS Background : background-origin and Background-clip

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

background-origin:

1. To specify the origin of the background color or image use background-origin property.

2. The possible values of background-origin are as follows :

border-box : The background color and image are drawn within the border box

padding-box : The background color and image are drawn within the padding box

content-box : The background color and image are drawn within the content box

Example: CSS Background : background-origin

Give it a TRY! » Note: The browser will draw background image or color within the defined box(border, padding, content) .


CSS Background : background-clip

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

background-clip:

1. The extent of the background visible to the user can be set using the background-clip property.

2. The possible values of background-clip are as follows :

border-box : Clip the background image or color to the outer edge of the border

padding-box : Clip the background image or color to the outer edge of the padding

content-box : Clip the background image or color to the outer edge of the content

Example: CSS Background : background-position

Give it a TRY! » Note: It instructs the browser to clip(discard) anything outside the given box( i,e border, padding, content) .


CSS Background : background shorthand

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

background:

1. To define multiple background properties in a single syntax use shorthand background property.

2. The order in which the properties must appear for background are as follows:

background : <background-color> <background-position> <background-size> <background-repeat> <background-origin> <background-clip> <background-attachment> <background-image>

If any value is left out, the browser will apply the default values for those properties

Example: CSS Background : background shorthand

Give it a TRY! » Note: The default state for background property is none .