CSS Background Property Shorthand

CSS Background image propertyCSS Background image property

CSS Background Image | Color | Repeat | Position | Attachment Property Shorthand

The CSS background property is used display the contents in a more sophisticated way. The property is used to give a background to an element. With the help of backgrounds we can separate the elements and contents of a web page easily.

Formatting Text in HTML and CSS

CSS Background image property

CSS Background Property Shorthand Syntax

There are ways that how you can set a background for an element. In the last posts we have discussed CSS border property. The border can be very helpful in finding the edges of an element. The background can also be used to see that where the boundaries of the element are. See the syntax below that how we can set a background of an element.

CSS Background property Syntax: background: <background-color> | <background-image> | <background-repeat> | <background-attachment> | <background-position>

body {
background: #ffffff url("imgage.jpg") no-repeat right top;
}

By default most of the elements have a transparent background color. The CSS background property transparent means that you can see through the element. You can set background explicitly and the background can be solid color, a gradient or an image. The above syntax shows that how many things you can set for a background. These all properties for a background can be set individually as well. Let us now discuss them in a bit more detail.

CSS background-image Property

The CSS background image property is used to set one or more than one background image for an element in CSS. The images are drawn on the stacking base. The background images are always on the top of the background color for the element. The background image will expand to the whole element box model not for the margins for the element. See the following CSS code that how you can set background images.

CSS Background image property

CSS Background image property

body {
background-image: url("imgage1.jpg");

background-color: #eee;
}

body {
background-image: url(“imgage1.jpg”), url(“imgage2.jpg”), url(“imgage3.jpg”);

background-color: #eee;
}

See the above code in which we are showing you that how you can set background images for a body tag. Let us now discuss how the other properties of the CSS background property.

CSS background-color Property

The CSS background color property is used to set or define a background color for an element. The background colors can be set using different kinds of values. Here are the values that you can use to set a background color of an image. See HTML Color Codes for a huge collection of colors

  • Hexadecimal values like #eeeeee or #eee;
  • rgb values like rgb(200, 255, 0);
  • rgba values like rgba(200, 255, 0, 0.6);//in CSS3
  • The color names like green;

body {
background-color: #eee;

//background-color: rgb(200, 255, 0);

// background-color: rgba(200, 255, 0, 0.6);

//background-color: green;
}

CSS background-repeat Property

This property is used to set the repetition for the background image. Using the background repeat property you can repeat an image horizontally or vertically. You can set the background repeat property to no-repeat if you don’t want a background image to repeat. Let us see how we can use the background repeat property.

background-repeat: repeat | repeat-x |repeat-y |no-repeat |initial |inherit;

body {
background-image: url("imgage1.jpg");

background-repeat: no-repeat;//

//background-repeat: repeat;

//background-repeat: repeat-x;

//background-repeat: repeat-y;

}

CSS background-position Property

The background position property is very useful when you are dealing with background images. It allows you to exactly place you background image where you want it in a background area of an element. Look at the follow code that how you can set a background images position in CSS.

background-position: value;

background-position: x-axis y-axis;

You can give maximum two values for a background position. Here are the names of values you can use for the background position of a background image.

  • center top
  • center center
  • center bottom
  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom

body {

background-image: url(“imgage1.jpg”);

background-repeat: no-repeat;
background-position: center;

//background-position: 50% 50%;

//background-position: 100px 150px;

}

CSS background-attachment Property

This property is used to set the background image to scroll with the rest of the page or to stay still when the page is scrolled. The syntax for the background attachment is as follows:

css background-attachment fixed position

css background-attachment

background-attachment: scroll | fixed | local | initial | inherit;

body {

background-image: url(“imgage1.jpg”);

background-repeat: no-repeat;
background-position: center;

background-attachment: fixed;

//background-attachment: scroll;

//background-attachment: local;

}

By setting the scroll property we are letting the background image to scroll with the rest of the contents. The fixed property is used to fix a background image. The local property is used to set the background image to scroll along with the element’s contents.

Learn more with CSS tutorials here on howtocode.pk

Comments