Backgrounds

HTML elements can have backgrounds set using the following CSS properties:

  • background
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

 

 

background

 

Shorthand approach, setting the other properties (in descending order from above) as follows:

 

Syntax:

body { background: color image repeat attachment position ; }

 

Example:

body { background: #0000FF url('path/myImage.png') no-repeat fixed top left ; }

 

This would give a blue background to the <body> element and place a non-repeating fixed image in the top left corner.

 

 

background-color

 

Sets the background color of the element, in hex, RGB or colour name.

 

Examples:

h1 { background-color: #00F; }

p { background-color: rgb(63, 127, 255) ; }

.myClass { background-color: orange ; }

 

 

background-image

 

Specifies a background image to be used on the element. It's default setting is set to repeat, to cover the whole element.

 

Example:

#myDiv { background-image: url('/images/logo.png') ; }

 

*note: the image path is relative to the stylesheet

 

 

background-repeat

 

Specifies whether the background image repeats horizontally or vertically.

 

Possible values are:

  • repeat
    • Specifies that the image will be repeated both horizontally and vertically. Default.
  • repeat-x
    • Specifies that the image will only be repeated horizontally
  • repeat-y
    • Specifies that the image will only be repeated vertically
  • no-repeat
    • Specifies that the image will not be repeated
  • inherit
    • Specifies that the setting is inherited from the parent element

 

Example:

body {background-image: url('/images/bigImage.png') ; background-repeat: no-repeat ; }

 

 

 

background-attachment

 

Specifies whether the background is fixed or scrolls with the page.

 

Possible values are:

  • scroll
    • background scrolls with the element. Default
  • fixed
    • background is fixed in the viewport
  • local
    • background scrolls with the element's content

 

Example:

body {background-image: url('/images/bigImage.png') ; background-repeat: no-repeat ; background-attachment: fixed ; }

 

 

background-position

 

Specifies the starting position of the background image

 

Value Description
left top 

left center

left bottom

center top

center center

center bottom

right top

right center

right bottom

The other value will be set to center if only one keyword is specified
x% y% x% is the horizontal position 

y% is the vertical position

top left is 0% 0%

bottom right is 100% 100%

The other value will be set to 50% if only one value is specified

xpos ypos xpos is the horizontal position 

ypos is the vertical position

Units can be px, cm or any other CSS units

Units and % can be mixed

The other value will be set to 50% if only one value is specified

inherit  Specifies that the setting is inherited from the parent element

 

 

Example:

 

body { background-image: url('/images/forest.png') ; background-repeat: no-repeat ; background-position: right top ; }

Leave a Reply