CSS background and CSS 3 background.

CSS background helps to personalize the background of the specified element, class, id or attribute.

CSS background properties.

  • Background-color.
  • Background-size.  css3
  • Background-origin.  css3
  • Background-image.
  • Background-repeat.
  • Background-position.
  • Background attachment.

 

Background-color.

Background-color is a property used to change the background color of  specified element, class, id or attributes. Value of background color can be specified in color name, rgb value or hex value of the color.

Example.

h1
{
background-color: green;
/* Also can be written as background-color : rgb(0,255,0) ; background-color : #00FF00;*/
}

Background-size.

Background size defines the following values.

  • cover.
  • contained.
  • %

Cover.

Background height matches with specified element height. the width will be adjusted according to background height. If background width became more than element width, then extra part of width will not show.
Suppose Image height and width is 20px. And height of the div is 40px and width is 30px, then after applying background-size : cover; Image height and width becomes 40. But Extra 10px width will not shown, since the width of a div is 30px.

div {
background-image: url(“http://i1.wp.com/seowebsiteblog.com/wp-content/uploads/2014/12/Facebook-page-link-to-see-more.jpg”);
background-repeat: no-repeat;
background-size : cover;
border: 3px solid rgba(255, 0, 0, 0.5);
width:400px;
height:600px;
}

background-size cover

Contain.

Background width matches with specified element width. The height will be adjusted according to background width. If background height became more than element height, then extra part of height will not show.
Suppose Image height and width is 20px. And height of the div is 30px and width is 40px, then after applying background-size : contain; Image height and width becomes 40. But Extra 10px height will not shown, since the height of a div is 30px.

Example.

div {
background-image: url(“http://i1.wp.com/seowebsiteblog.com/wp-content/uploads/2014/12/Facebook-page-link-to-see-more.jpg”);
background-repeat: no-repeat;
background-size : contain;
border: 3px solid rgba(255, 0, 0, 0.5);
width:400px;
height:600px;
}

background-size contain

% (percentage)

Width of background will be adjusted with specified element width according to percentage %. Background width will match exactly with element width at 100%. In fact background-size : 100%; means background-size : contain;  background-size : 90%; means Background width will become 10% less than element width.

div {
background-image: url(“http://i1.wp.com/seowebsiteblog.com/wp-content/uploads/2014/12/Facebook-page-link-to-see-more.jpg”);
background-repeat: no-repeat;
background-size : 90%;
border: 3px solid rgba(255, 0, 0, 0.5);
width:400px;
height:600px;
}

In above example image width will be 360px. Because we have specified the background size is 90%.

background-size custom

 

Background-origin.

Background-origin can have following values.

  • Padding-box.
  • Border-box.
  • Content-box.

Padding-box.

Background will be appear at specified position of an element. No matter how much padding you have provided. Padding (padding:value;) remains unaffected.

div {
background-image: url(“http://i1.wp.com/seowebsiteblog.com/wp-content/uploads/2014/12/Facebook-page-link-to-see-more.jpg?resize=445%2C353”);
background-repeat: no-repeat;
background-position: top left;
border: 50px solid rgba(255, 0, 0, 0.5);
padding:150px;
background-origin: padding-box;
}

padding box

Border-box.

Background will be appear at specified of the border of an element. padding value remains unaffected. If the border width is less than the background width then some part of background may appear inside the element. You can see background inside border by decreasing opacity.

Example

div {
background-image: url(“http://i1.wp.com/seowebsiteblog.com/wp-content/uploads/2014/12/Facebook-page-link-to-see-more.jpg?resize=445%2C353”);
background-repeat: no-repeat;
background-position: top left;
border: 50px solid rgba(255, 0, 0, 0.5);
padding:150px;
background-origin: border-box;
}

border box

Content.box.

Padding value will affect here. Background will be appear by leaving distance specified in value of the padding property.

Example.

div {
background-image: url(“http://i1.wp.com/seowebsiteblog.com/wp-content/uploads/2014/12/Facebook-page-link-to-see-more.jpg?resize=445%2C353”);
background-repeat: no-repeat;
background-position: top left;
border: 50px solid rgba(255, 0, 0, 0.5);
padding:150px;
background-origin: content-box;
}

Content box

Background-image.

The background image property allows to a set background image at specified HTML element, class, id or attribute.

Example.

body
{
background-image: url(‘pine.jpg’);
}

CSS background-image output

Background-Repeat.

The output of the background-image property shows repeated images. The Background-Repeat property can solve the problem.

The following values can be defined for background-repeat.

  • Repeat- x
  • Repeat-y
  • No-repeat

Repeat-x repeats the image horizontally.

body
{
background-image: url(‘pine.jpg’);
background-repeat: repeat-y;
}

repeat-x

Repeat-y repeats the image vertically.

body
{
background-image: url(‘pine.jpg’);
background-repeat: repeat-y;
}

repeat-y

no-repeat does not repeat an image.

body
{
background-image: url(‘pine.jpg’);
background-repeat: no-repeat;
}

no-repeat

Background-position

The background-position property is used to set the position of a specified element, class, id or attribute.

Position values.

  • left top, right top, right center, center bottom etc.
  • x%, y%.
  • xpx, ypx.

left top, right top, right center, center bottom etc.

The default value is left top. If you specified only one value, the other value will be centered.

Example:

body
{
background-image: url(‘http://i1.wp.com/seowebsiteblog.com/wp-content/uploads/2014/12/Facebook-page-link-to-see-more.jpg’);
background-repeat: no-repeat;
background-position: top center;
}

x%, y%.

x% defines horizontal value. y% defines vertical value. For example, 25% 50%, 73% 34% etc. Default value is 0% 0%.

Example:

body
{
background-image: url(‘http://i1.wp.com/seowebsiteblog.com/wp-content/uploads/2014/12/Facebook-page-link-to-see-more.jpg’);
background-repeat: no-repeat;
background-position: 25% 50%;
}

xpx, ypx.

xpx defines horizontal value. ypx defines vertical value. For example, 25px 50px, 73px 34px etc. Default value is 0px 0px.

Example:

body
{
background-image: url(‘http://i1.wp.com/seowebsiteblog.com/wp-content/uploads/2014/12/Facebook-page-link-to-see-more.jpg’);
background-repeat: no-repeat;
background-position: 25px 50px;
}

background-position examples.

Background-attachment.

Background-attachment values.

  • fixed.
  • scroll.
  • inherit

Fixed.

Background will hold its position even if the element is scrolled.

Example.

body
{
background-image: url(‘http://i1.wp.com/seowebsiteblog.com/wp-content/uploads/2014/12/Facebook-page-link-to-see-more.jpg’);
background-repeat: no-repeat;
background-attachment: fixed;
}

scroll.

The background will scroll with the element.

Example.

body
{
background-image: url(‘http://i1.wp.com/seowebsiteblog.com/wp-content/uploads/2014/12/Facebook-page-link-to-see-more.jpg’);
background-repeat: no-repeat;
background-attachment: scroll;
}

inherit.

Takes same specified value as a parent element value.

Example of inherit.

Background-attachment example.

 

Comments

comments