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.

property	example	description
background-image	background-image: url();	background image for this element
background-attachment	background-attachment: fixed	sets whether a background image scrolls with the rest of the page, or is fixed
background-position	background-position: top left	sets the starting position of a background image
background-repeat	background-repeat: repeat-x	sets if/how a background image is repeated

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);
}

EMMET instruction	result
bgi + TAB	background-image: url();

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 */
}

EMMET instruction	result
bga + TAB	background-attachment: ;
bga:f + TAB	background-attachment: fixed;

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 */
}

EMMET instruction	result
bgp + TAB	background-position: 0 0;

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. */
}

EMMET instruction	result
bgr + TAB	background-repeat: ;
bgr:n + TAB	background-repeat: no-repeat;
bgr:x + TAB	background-repeat: repeat-x;
bgr:y + TAB	background-repeat: repeat-y;

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

DESIGN TIP

• Background patterns have a big impact on how a website is perceived.
  • Going for a modern look? Probably best to avoid them.
  • Going for a retro look? Use them with caution.