# Background images

• In CSS it's also possible to work with images. With the background-image property you can specify an image and use it as a background image for an element.

# background-image

• The background-image property sets one (or more) background image(s) for an element
• By default, a background image is placed at the top left corner of an element, and repeated both vertically and horizontally

body {
  background-image: url(pattern.png);
}

# background-attachment

• The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed
  • Possible values: fixed, scroll (= default)

body {
  background-attachment: fixed; /* The background image will not scroll with the page */
}

# background-position

• The background-position property sets the (initial) position of a background image
  • Possible values (see interactive example): left top (= default), top left,left center,bottom right,right top, ...px ...px, ...
    • first value for horizontal positioning: left, center, right or use fixed units like px, %, ...
    • second value for vertical positioning: top, center, bottom or use fixed units like px, %, ...
    • horizontal and vertical positioning values are interchangeable:
      background-position: center top; = background-position: top center;

body {
  background-position: center bottom; /* The background image will be placed at the center and bottom of the element */
}

body {
  background-position: 50px 100px; /* The background image will be placed at 50px from the left and 100px from the top of the window */
}

# background-repeat

• The background-repeat property sets if/how a background image is repeated
  • Possible values: repeat (= default), repeat-x,repeat-y,no-repeat

body {
  background-repeat: repeat-x; /* The background image is repeated only horizontally */
}

body {
  background-repeat: repeat-y; /* The background image is repeated only vertically */
}

body {
  background-repeat: no-repeat; /* The background-image is not repeated. The image will only be shown once. */
}

# Example 1: default background-image

# Example 2: extra properties for scroll behavior, position and repetition

# Example 3: all-in-one modern example

# CSS3 patterns

• In Example 1 we implemented a pattern by repeating a background-image. An alternative is to code the pattern in CSS, without using images
  • Some interesting examples of Lea Verou's CSS3 Patterns gallery can be found in the example below
    • Experiment with altering some values in these patterns
• You don't have to be able to code such patterns yourself!

# Example

# Linear gradients

• There has been a (recent) revival of gradients, as you can now code them in CSS as well (and you are no longer dependent on Photoshopped images with a colour gradient)
• Again, you rarely code such gradients yourself. Use a gradient generator such as cssgradient.io instead.

# Example