Backgrounds and Borders

Background properties
- background-color
- background-image'
- background-repeat
- background-attachment
- background-position
- background-clip
- background-origin
- background-size
- background shorthand

Border properties
- border-color
- border-style
- border-width
- border shorthand
- border-radius
Border Images
- border-image-source
- border-image-slice
- border-image-width
- border-image-outset
- border-image-repea
- border-image shorthand

Background properties

background-color

Use any of the color types
Always declare when declaring background images
Declare only once in a shorthand declaration.
Nothing really new here

  background-color: white;
  background-color: #fff;
  background-color: #FFFFFF;
  background-color: rgb(255,255,255);
  background-color: rgb(100%,100%,100%);
  background-color: rgba(255,255,255,1);
  background-color: rgba(100%,100%,100%, 1);
  background-color: hsl(0, 100%, 100%);
  background-color: hsla(0, 100%, 100%, 1);
  background-color: transparent;
  background-color: currentColor;

Confused? See Part 6: Colors & Transparency

Old School: background-image

none | <url> | inherit

background-image: url(path/aSingleLonelyCat);

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

multiple background-image

background-image: url(brown.gif), url(blue.gif);

Comma separated
layered front to back
Include background-color
Don't print
Not accessible

Chrome
Safari 1.3
Firefox 3.6
Opera
IE 9

CSS3 background-image value types

none | <url> | <image-list> | <element-reference>  | <gradient>

url(singleImage.png) 
url(multipleImages.gif), url(otherGif.gif)
none
linear-gradient(top, red, blue)
radial-gradient(circle, red, blue)
url(data:image/gif;base64,fOulrS123hEAAa517sdfQfda...)
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='200'><circle cx='55' cy='190' r='25' fill='#FFF' /></svg>");
element('#someID')
image('ico_sprite.jpg#xywh=32,64,16,16')
image("try1.svg", 'try2.png' , "try3.gif")
image("leftArrow.png" ltr, "rightArrow.png" rtl)

url() values

url(singleImage.png) 
 
url(multipleImages.gif), url(otherGif.gif)

url(SVGImages.svg);

url(sprite.png#xywh=40,0,20,20)

url(data:image/gif;base64,fOulrS123hEAAa517sdfQfdafsPFRjuy187xxRM221...)

url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='200'><circle cx='55' cy='190' r='25' fill='#FFF' />^lt;path d='M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z' fill='#666'/><path d='M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z' fill='#666'/></svg>"); SVG Example

Media fragment will not break backwards... hash will be ignored

Other background-image syntax

Allows the use of any element, including <canvas> where images can be used.

Firefox 4

background-image: -moz-element('#someID');
background-image: element('#someID')

Define which portion of the image to show:

Firefox 4

background-image: 
    -moz-image-rect(url(ico_sprite.jpg), 32, 64, 16, 16);
background-image: image('ico_sprite.jpg#xywh=32,64,16,16')

Unsupported Syntax (future!!)

Fallback in case your images doesn't load:

background-image: 
     image("try1.svg", "try2.png", "try3.gif", blue)

Flip the image if the direction is rtl.

background-image: image("arrow.png" rtl)

background-image

background-image: url(myGif.gif), url(otherGif.gif);

background-image: none;

background-image: linear-gradient(top, red, blue);
  
background-image: url(data:image/gif;base64,fOulrShEAAQ...);
  
background-image:
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='200'><circle cx='55' cy='190' r='25' fill='#FFF' /></svg>");
  
background-image: element('#myID');

background-image: image('ico_sprite.jpg#xywh=32,64,16,16');

background-image: image("try1.svg", 'try2.png' , "try3.gif");

Browser Support

Feature	/ Browser Firefox	Chrome	Internet Explorer	Opera	Safari
Basic support	1	1	4	3.5	1
Multiple backgrounds	3.6	1	9	yes	1.3
Gradients	3.6 -moz	1 -webkit	10 -ms	11+ -o	4 -webkit
SVG images	4	8	9	9.5	5
element()	-moz
image()	-moz-image-rect()

background-repeat

background-repeat: 
  repeat | repeat-x | repeat-y | no-repeat | space | round;

repeat: Tiled as often as needed to cover background
no-repeat: Placed once, not tiled or repeated
repeat-x: Tiled along X axis only (Equivalent to repeat no-repeat)
repeat-y: Tiled along Y axis only (Equivalent to no-repeat repeat)
space: Repeated as often as will fit without being clipped, spaced out evenly
round: Repeated as often as will fit without being clipped then scaled so no space in between

background-repeat: no-repeat;

Should accept 2 values (H & V), but only Opera supports that
Tip: Include background-repeat: no-repeat; in your reset CSS

background-attachment

background-attachment: fixed | local | scroll

background-attachment: scroll

Filet mignon kielbasa pork chop short ribs short loin shank hamburger. Bresaola hamburger venison shankle pork andouille. Pastrami venison andouille pancetta sausage chicken biltong. Tri-tip jerky short loin tenderloin pork chop. Shoulder frankfurter turkey ribeye, jowl tail leberkase brisket sausage boudin ham hock shankle ground round short loin.

background-position

New in CSS3: Positioning relative to any corner

background-position: right 50px bottom 50p;

Chrome
Safari
Firefox
Opera
IE 9

background-clip

background-clip: border-box | padding-box | content-box

content-box

padding-box

border-box

Chrome
Safari
Firefox 4
Opera
IE 9
add -moz- for FF 3.6 and earlier

background-origin

background-origin: border-box | padding-box | content-box

content-box

padding-box

border-box

Chrome
Safari 5.1
Firefox 4
Opera
IE 9
add -moz- for FF 3.6, -webkit- for Safari 5

background-size

background-size: auto | contain | cover | <length>

Use for creating gradients backgrounds
Needed for hiDPI images
‘contain’ grows/shrinks to fully fit
‘cover’ grows to min size that covers 100% of height & width

Chrome
Safari
Firefox 4
Opera 11
IE 9
add -moz- for FF 3.6 and earlier

background shorthand

background: 
 img position / size repeat attachment origin clip, 
 img position / size repeat attachment box{1,2} bgcolor;

background: 
 url(topImg.jpg) 0 0 / 30px 30px repeat scroll border-box content-box, 
 url(botImg.jpg) 15px 15px / 30px 30px fixed border-box #609;

DO NOT USE BACKGROUND SHORTHAND!!!

Border properties & browser support
If one ‘box’ value is present then it sets both 'background-origin' and 'background-clip' to that value. If two values are present, then the first sets 'background-origin' and the second 'background-clip'

Border properties

border-color

Use any of the color types
Nothing really new here

  border-color: white;
  border-color: #fff;
  border-color: #FFFFFF;
  border-color: rgb(255,255,255);
  border-color: rgb(100%,100%,100%);
  border-color: rgba(255,255,255,1);
  border-color: rgba(100%,100%,100%, 1);
  border-color: hsl(0, 100%, 100%);
  border-color: hsla(0, 100%, 100%, 1);
  border-color: transparent;
  border-color: currentColor; /* default */

border-style

Up to 4 values (TRouBLe)
Old Webkit browsers ignored color for groove, inset, outset & ridge. Fixed!
IE6 & IE7 do not understand 'hidden', and inherit.

none: No border. As if border-width: 0; except with border-image
hidden: Same as none, but relevant in border-collapsed tables
dotted: Round dots.
dashed: Square-ended dashes.
solid: a single solid line.
double: Two parallel solid lines. Only relevant if border-width >= 3px. line + space + line = border-width value.
groove: Shadow effect using two colors on each side, with a slightly lighter and darker than the border-color value. Top / left half of each side darker.
ridge: Looks as if it were coming out of the canvas. Bottom / Right darker
inset: Looks sunken into page. Top and left border are made darker, bottom and right are lighter.. Treated as ridge in border-collapsed tables.
outset: Looks as if popping out of page. Bottom and right are darker. Top and left border are lighter.. Treated as groove in border-collapsed tables.

border-width

border-width: (length) | thin | medium | thick | inherit {1,4};

Up to 4 values (TRouBLe)
Nothing new here

border shorthand

border: width style color;

border-left: width style color;

border-top: 5px dashed rgba(217,68,11, 0.8);

style is REQUIRED.
width defaults to medium
color defaults to currentColor
IE up to 8 is buggy

border-radius

border-radius: 0;

border-radius: 20px;

border-radius: 50%;

Chrome / Chrome 4
Safari 3 / Safari 5
Firefox 1 / Firefox 4
Opera 10.5
IE 9

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

-moz- prefix for 3.6 and earlier
longhand syntax in FF3.6
% works since Safari 5.1 and FF 4.0

border-radius

.circle {border-radius: 50%;}

.oval { border-radius: 50%;}

.different { border-radius: 10px 30px;}

.elliptical { border-radius: 10px / 30px;}

.uglier {
  border-radius: 10px 35px 20px 15px /
                 30px 35px 5px 5px;}

Border Images

What is Border Image

border-image

border-image: source || slice / width / outset  || repeat;

Chrome
Safari 3.1
Firefox 3.5
Opera 10.5
IE 10?

Underlying Properties

border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
border-image

border-image

border-image-source: none | url() | <image>

border-image-slice: <number> | XX% {1,4} && fill

border-image-width: <length> | XX% | <number> | 1 | auto {1,4}

border-image-outset: <length> | <number> {1,4}	

border-image-repeat: stretch | repeat | round {1,2}

S = 
W =

border-image: url(gradient.png) 34 / 34px stretch;

DO NOT USE BACKGROUND SHORTHAND!!!

Underlying Properties

Next ➹