CSS Backgrounds Guide

The background-color property sets the background color of an element:

.bg-color {
  background-color: #3498db;
}

.bg-color-alpha {
  background-color: rgba(52, 152, 219, 0.5);
}

Color Formats

/* Different ways to specify background colors */
.bg-hex {
  background-color: #3498db;
}

.bg-rgb {
  background-color: rgb(52, 152, 219);
}

.bg-rgba {
  background-color: rgba(52, 152, 219, 0.5);
}

.bg-hsl {
  background-color: hsl(204, 70%, 53%);
}

.bg-hsla {
  background-color: hsla(204, 70%, 53%, 0.5);
}

.bg-named-color {
  background-color: dodgerblue;
}

CSS gradients let you display smooth transitions between two or more specified colors:

.bg-linear-gradient {
  background-image: linear-gradient(to right, #3498db, #2ecc71);
}

.bg-radial-gradient {
  background-image: radial-gradient(circle, #3498db, #2ecc71);
}

More Gradient Options

/* Angled linear gradient */
.bg-angled-gradient {
  background-image: linear-gradient(45deg, #3498db, #2ecc71);
}

/* Multi-color gradient */
.bg-multi-color-gradient {
  background-image: linear-gradient(to right, #3498db, #2ecc71, #f1c40f, #e74c3c);
}

/* With color stops */
.bg-color-stops {
  background-image: linear-gradient(to right, 
    #3498db 0%, 
    #3498db 20%, 
    #2ecc71 20%, 
    #2ecc71 100%);
}

/* Conic gradient */
.bg-conic-gradient {
  background-image: conic-gradient(#3498db, #2ecc71, #f1c40f, #e74c3c, #3498db);
}

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

.bg-image {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
}

.bg-multi {
  background: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('image.jpg');
  background-size: cover;
  background-position: center;
}

The background-repeat property defines how background images are repeated:

.bg-image-repeat {
  background-image: url('pattern.jpg');
  background-repeat: repeat; /* Default */
}

.bg-image-repeat-x {
  background-image: url('pattern.jpg');
  background-repeat: repeat-x;
}

.bg-image-no-repeat {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: center;
}

Other Repeat Values

/* Repeat only vertically */
.bg-repeat-y {
  background-repeat: repeat-y;
}

/* Space images evenly */
.bg-repeat-space {
  background-repeat: space;
}

/* Repeat and round to fit */
.bg-repeat-round {
  background-repeat: round;
}

The background-position property sets the starting position of a background image:

.bg-position-top-left {
  background-position: top left;
}

.bg-position-center {
  background-position: center;
}

.bg-position-bottom-right {
  background-position: bottom right;
}

Using Numeric Values

/* Using percentages */
.bg-position-percent {
  background-position: 25% 75%;
}

/* Using pixels */
.bg-position-px {
  background-position: 50px 100px;
}

The background-size property specifies the size of the background images:

.bg-size-cover {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
}

.bg-size-contain {
  background-image: url('image.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

Using Numeric Values

/* Using pixels */
.bg-size-px {
  background-size: 200px 100px;
}

/* Using percentages */
.bg-size-percent {
  background-size: 50% 50%;
}

/* Setting just width (height auto) */
.bg-size-auto-height {
  background-size: 50% auto;
}

The background-attachment property sets whether a background image scrolls with the rest of the page or remains fixed:

.bg-attachment-scroll {
  background-image: url('image.jpg');
  background-attachment: scroll; /* Default */
  background-size: cover;
}

.bg-attachment-fixed {
  background-image: url('image.jpg');
  background-attachment: fixed;
  background-size: cover;
}

Local Attachment

/* Scrolls with element content */
.bg-attachment-local {
  background-attachment: local;
}

The background-clip property defines how far the background should extend:

.bg-clip-border {
  background-color: #3498db;
  border: 15px dashed #2c3e50;
  padding: 20px;
  background-clip: border-box;
}

.bg-clip-padding {
  background-color: #3498db;
  border: 15px dashed #2c3e50;
  padding: 20px;
  background-clip: padding-box;
}

.bg-clip-content {
  background-color: #3498db;
  border: 15px dashed #2c3e50;
  padding: 20px;
  background-clip: content-box;
}

Background Origin

The background-origin property specifies where the background image is positioned:

.bg-origin-border {
  background-image: url('image.jpg');
  border: 15px dashed #2c3e50;
  padding: 20px;
  background-origin: border-box;
}

.bg-origin-padding {
  background-image: url('image.jpg');
  border: 15px dashed #2c3e50;
  padding: 20px;
  background-origin: padding-box;
}

.bg-origin-content {
  background-image: url('image.jpg');
  border: 15px dashed #2c3e50;
  padding: 20px;
  background-origin: content-box;
}

You can create interesting patterns using CSS backgrounds without external images:

.bg-pattern-stripes {
  background-image: 
    linear-gradient(45deg, #3498db 25%, transparent 25%),
    linear-gradient(-45deg, #3498db 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #3498db 75%),
    linear-gradient(-45deg, transparent 75%, #3498db 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.bg-pattern-polka {
  background-color: #3498db;
  background-image: radial-gradient(#ffffff 10%, transparent 11%),
                    radial-gradient(#ffffff 10%, transparent 11%);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}

.bg-pattern-grid {
  background-image:
    linear-gradient(#3498db 1px, transparent 1px),
    linear-gradient(90deg, #3498db 1px, transparent 1px);
  background-size: 20px 20px;
}

CSS allows you to specify multiple background layers, separated by commas:

/* Multiple background layers */
.multiple-backgrounds {
  background: 
    url('pattern.png'),
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('main-image.jpg');
  background-position: 
    center,
    center,
    center;
  background-size: 
    auto,
    cover,
    cover;
  background-repeat: 
    repeat,
    no-repeat,
    no-repeat;
}

/* Note: Background layers are stacked with the first one on top */

The background shorthand property lets you set multiple background properties at once:

/* Background shorthand */
.background-shorthand {
  background: #3498db url('image.jpg') no-repeat center/cover fixed;
}

/* Equivalent to: */
.background-longhand {
  background-color: #3498db;
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

The order of values in the shorthand property is:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position / background-size (with slash between them)

• Optimize image sizes: Use appropriately sized images to reduce load times.
• Consider mobile users: Ensure backgrounds look good on small screens.
• Provide fallbacks: Use a background color as a fallback while images load.
• Text readability: Ensure text has sufficient contrast with the background.
• Use SVG for patterns: SVG patterns scale well for high-resolution displays.
• Lazy-loading: Consider lazy-loading background images for better performance.