CSS Background

CSS Background property is a shorthand for a number of background longhand properties that we will meet in this lesson. If you discover a complex background property in a stylesheet, it might seem a little hard to understand as so many values can be passed in at once.

The background property is specified as one or more background layers, separated by commas.

The syntax of each layer is as follows:

  • Each layer may include zero or one occurrences of any of the following values:
    • <attachment>
    • <bg-image>
    • <position>
    • <bg-size>
    • <repeat-style>
  • The <bg-size> value may only be included immediately after <position>, separated with the ‘/’ character, like this: “center/80%“.
  • The <box> value may be included zero, one, or two times. If included once, it sets both background-origin and background-clip. If it is included twice, the first occurrence sets background-origin, and the second sets background-clip.
  • The <background-color> value may only be included in the last layer specified.

CSS Background Images

The background-image property enables the display of an image in the background of an element.

The background-image property sets one or more background images for an element.

By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.

If you specify a background color in addition to a background image then the image displays on top of the color. Try adding a background-color property to the example above to see that in action.

body {  
background-image: url("media/flower.jpeg" ;
margin-left:100px;
}

CSS Gradient Backgrounds:

A gradient — when used for a background — acts just like an image and is also set by using the background-image property.

You can read more about the different types of gradients and things you can do with them on the MDN (Mozilla Developer Network) page for the <gradient> data type. A fun way to play with gradients is to use one of the many CSS Gradient Generators available on the web, such as this one. You can create a gradient then copy and paste out the source code that generates it. 

.a {
background-image: linear-gradient(105deg, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);
}
.b {
background-image: radial-gradient(circle, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);
background-size: 100px 50px;
}
CSS backgrounds 3

CSS Background Properties:

PropertyDescription
backgroundSets all the background properties in one declaration
background-attachmentSets whether a background image is fixed or scrolls with the rest of the page
background-clipSpecifies the painting area of the background
background-colorSets the background color of an element
background-imageSets the background image for an element
background-originSpecifies where the background image(s) is/are positioned
background-positionSets the starting position of a background image
background-repeatSets how a background image will be repeated
background-sizeSpecifies the size of the background image(s)

CSS Background attachment

Another option we have available for backgrounds is specifying how they scroll when the content scrolls. This is controlled using the background-attachment property, which can take the following values:

  • scroll: It causes the element’s background to scroll when the page is scrolled. If the element content is scrolled, the background does not move. In effect, the background is fixed to the same position on the page, so it scrolls as the page scrolls.
  • fixed: It causes an element’s background to be fixed to the viewport so that it doesn’t scroll when the page or element content is scrolled. It will always remain in the same position on the screen.
  • local: This value was added later on (it is only supported in Internet Explorer 9+, whereas the others are supported in IE4+) because the scroll value is rather confusing and doesn’t really do what you want in many cases. The local value fixes the background to the element it is set on, so when you scroll the element, the background scrolls with it.

The background-attachment property only has an effect when there is content to scroll, so we’ve made a demo to demonstrate the differences between the three values — have a look at background-attachment.html (also see the source code here).

Comments are closed.