Session 1.7 – CSS Styling: Background and Border

Introduction

Background and border properties are essential for creating visually appealing web designs. These properties allow you to add colors, images, gradients, and decorative borders to elements, transforming basic HTML into beautiful, professional-looking websites.

Key Insight

Modern CSS provides powerful background and border capabilities including multiple backgrounds, complex gradients, and flexible border styling. These properties are fundamental to creating engaging user interfaces.

Background Color

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

Color Value Types

/* Named colors (140+ color names) */
background-color: red;
background-color: lightblue;
background-color: cornflowerblue;

/* Hexadecimal notation */
background-color: #ff0000;      /* Red */
background-color: #0000ff;      /* Blue */
background-color: #3498db;      /* Light Blue */

/* RGB notation */
background-color: rgb(255, 0, 0);           /* Red */
background-color: rgb(52, 152, 219);        /* Light Blue */

/* RGBA (with transparency) */
background-color: rgba(255, 0, 0, 0.5);     /* Semi-transparent red */
background-color: rgba(0, 0, 0, 0.8);       /* 80% opaque black */

/* HSL (Hue, Saturation, Lightness) */
background-color: hsl(0, 100%, 50%);        /* Red */
background-color: hsl(204, 70%, 53%);       /* Light Blue */

/* HSLA (with transparency) */
background-color: hsla(0, 100%, 50%, 0.5);  /* Semi-transparent red */

/* Transparent */
background-color: transparent;
                    

Visual Examples

#e74c3c
Hex Red

RGB
46, 204, 113

RGBA
70% Opaque

HSL
Purple

Color Format Comparison

Hex: Most common, compact, easy to copy
RGB/RGBA: Intuitive, supports transparency
HSL/HSLA: Best for creating color variations, adjusting brightness
Named colors: Easy to remember but limited palette

Background Image

Background images add visual interest and can be combined with other background properties for sophisticated designs.

Background Image Properties

/* Basic background image */
.hero {
    background-image: url('images/hero.jpg');
}

/* Background repeat control */
background-repeat: repeat;          /* Default - tiles in both directions */
background-repeat: repeat-x;        /* Repeats horizontally only */
background-repeat: repeat-y;        /* Repeats vertically only */
background-repeat: no-repeat;       /* Shows once */

/* Background position */
background-position: center;        /* Center both axes */
background-position: top left;      /* Top-left corner */
background-position: 50% 50%;       /* Percentage positioning */
background-position: 20px 30px;     /* Pixel positioning */

/* Background size */
background-size: auto;              /* Original size */
background-size: cover;             /* Covers entire element, may crop */
background-size: contain;           /* Fits within element, may show gaps */
background-size: 100% 100%;         /* Stretches to fit */
background-size: 500px 300px;       /* Specific dimensions */

/* Background attachment */
background-attachment: scroll;      /* Scrolls with content (default) */
background-attachment: fixed;       /* Fixed to viewport (parallax effect) */
                    

Shorthand Syntax

/* Full shorthand: color image position/size repeat attachment */
background: #333 url('bg.jpg') center/cover no-repeat fixed;

/* Common patterns */
.banner {
    background: url('banner.jpg') center/cover no-repeat;
}

.pattern {
    background: url('pattern.png') repeat;
}

.hero-section {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
                url('hero.jpg') center/cover no-repeat;
}
                    

Multiple Backgrounds

/* Layer multiple backgrounds (first listed is on top) */
.multi-bg {
    background:
        url('foreground.png') top center no-repeat,
        url('middle.png') center center repeat-x,
        url('background.jpg') center/cover no-repeat;
}

/* Combine gradient and image */
.overlay {
    background:
        linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
        url('image.jpg') center/cover;
}
                    

Background Size Comparison

auto

cover

contain

CSS Gradients

Gradients create smooth transitions between colors, eliminating the need for image files.

Linear Gradients

/* Basic linear gradient (top to bottom) */
background: linear-gradient(red, blue);

/* Gradient with direction */
background: linear-gradient(to right, red, blue);
background: linear-gradient(to bottom right, red, blue);
background: linear-gradient(45deg, red, blue);
background: linear-gradient(180deg, red, blue);

/* Multiple color stops */
background: linear-gradient(red, yellow, green);

/* Color stops with positions */
background: linear-gradient(
    red 0%,
    yellow 50%,
    green 100%
);

/* Sharp color transitions */
background: linear-gradient(
    red 0% 33%,
    yellow 33% 66%,
    green 66% 100%
);
                    

Linear Gradient Examples

to right (Purple)

45deg (Pink)

to bottom (Blue)

135deg (Sunset)

Radial Gradients

/* Basic radial gradient (center outward) */
background: radial-gradient(red, blue);

/* With shape (circle or ellipse) */
background: radial-gradient(circle, red, blue);
background: radial-gradient(ellipse, red, blue);

/* With size keywords */
background: radial-gradient(closest-side, red, blue);
background: radial-gradient(farthest-corner, red, blue);

/* Positioned radial gradient */
background: radial-gradient(circle at top left, red, blue);
background: radial-gradient(at 30% 40%, red, blue);

/* Multiple color stops */
background: radial-gradient(
    circle,
    red 0%,
    yellow 50%,
    green 100%
);
                    

Radial Gradient Examples

Circle Radial

Ellipse Radial

Conic Gradients

/* Conic gradient (rotates around center) */
background: conic-gradient(red, yellow, green, blue, red);

/* Positioned conic gradient */
background: conic-gradient(from 45deg, red, yellow, green);

/* Pie chart effect */
background: conic-gradient(
    red 0deg 120deg,
    yellow 120deg 240deg,
    green 240deg 360deg
);
                    

Gradient Tips

Use gradients to create depth and visual interest without images
Combine gradients with background images for overlay effects
Tools like cssgradient.io can help generate gradient code
Keep gradients subtle for professional designs

Border Properties

Borders create visible boundaries around elements and can be customized with various styles, widths, and colors.

Border Properties

/* Individual border properties */
border-width: 2px;
border-style: solid;
border-color: #333;

/* Border shorthand */
border: 2px solid #333;

/* Individual sides */
border-top: 2px solid red;
border-right: 3px dashed blue;
border-bottom: 4px dotted green;
border-left: 1px solid black;

/* Individual side properties */
border-top-width: 2px;
border-top-style: solid;
border-top-color: red;
                    

Border Styles

solid

dashed

dotted

double

groove

ridge

inset

outset

none/transparent

Border Width Values

/* Predefined widths */
border-width: thin;      /* Usually 1px */
border-width: medium;    /* Usually 3px */
border-width: thick;     /* Usually 5px */

/* Specific measurements */
border-width: 2px;
border-width: 0.2em;
border-width: 2rem;

/* Different widths for each side (top right bottom left) */
border-width: 2px 4px 6px 8px;
                    

Border Radius

The border-radius property creates rounded corners on elements.

Border Radius Syntax

/* Equal radius on all corners */
border-radius: 10px;

/* Horizontal / Vertical radii */
border-radius: 10px 20px;

/* Individual corners (top-left, top-right, bottom-right, bottom-left) */
border-radius: 10px 20px 30px 40px;

/* Individual corner properties */
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;

/* Elliptical corners */
border-radius: 50px / 25px;  /* horizontal / vertical */

/* Perfect circle (square element) */
border-radius: 50%;

/* Pill shape */
border-radius: 999px;
                    

Visual Examples

0px
No radius

10px
Slight round

25px
Rounded

50%
Circle

Creative Border Radius

50% 0
Alternating

30px 0
Wave

Mixed
Unique

Border Radius Tips

Use subtle radius (5-10px) for modern, professional designs
50% creates perfect circles on square elements
Large values (999px) create pill-shaped buttons
Asymmetric radii create unique organic shapes

Practical Examples

Example 1: Card with Gradient Background

<style>
    .gradient-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 15px;
        padding: 30px;
        color: white;
        border: none;
    }

    .gradient-card h3 {
        margin: 0 0 10px 0;
    }
</style>

<div class="gradient-card">
    <h3>Premium Feature</h3>
    <p>Unlock advanced capabilities with our premium plan.</p>
</div>
                    

Example 2: Hero Section with Background

<style>
    .hero {
        background:
            linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
            url('hero-image.jpg') center/cover no-repeat;
        min-height: 500px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-align: center;
    }

    .hero h1 {
        font-size: 3rem;
        margin-bottom: 20px;
    }
</style>

<div class="hero">
    <div>
        <h1>Welcome to Our Website</h1>
        <p>Creating amazing experiences</p>
    </div>
</div>
                    

Example 3: Modern Button Styles

<style>
    .btn-primary {
        background: linear-gradient(135deg, #667eea, #764ba2);
        border: none;
        border-radius: 50px;
        padding: 15px 40px;
        color: white;
        font-weight: bold;
        cursor: pointer;
    }

    .btn-outline {
        background: transparent;
        border: 2px solid #667eea;
        border-radius: 50px;
        padding: 15px 40px;
        color: #667eea;
        font-weight: bold;
    }

    .btn-ghost {
        background: rgba(255, 255, 255, 0.1);
        border: 2px solid white;
        border-radius: 8px;
        padding: 12px 30px;
        color: white;
        backdrop-filter: blur(10px);
    }
</style>
                    

Live Button Examples

Session Summary

Key Points

Background Color: Use hex, RGB, RGBA, HSL, or named colors for backgrounds
Background Image: Control positioning, size, repeat, and attachment for images
Gradients: Create linear, radial, and conic gradients without images
Multiple Backgrounds: Layer multiple images and gradients for complex designs
Borders: Style with various widths, styles (solid, dashed, dotted), and colors
Border Radius: Create rounded corners and shapes from subtle to circular

Best Practices

Use background-size: cover for hero sections and full-width images
Combine gradients with images for overlay effects
Keep gradients subtle for professional designs
Use border-radius consistently throughout your design
Consider accessibility with sufficient color contrast
Optimize background images for web performance

Next Session Preview

In the next session, we'll explore CSS Grid Layout, a powerful two-dimensional layout system that revolutionizes how we create complex web layouts with clean, maintainable code.

Session 1.7 – CSS Styling: Background and Border

Learning Objectives

Introduction

Key Insight

Background Color

Color Value Types

Visual Examples

Color Format Comparison

Background Image

Background Image Properties

Shorthand Syntax

Multiple Backgrounds

Background Size Comparison

CSS Gradients

Linear Gradients

Linear Gradient Examples

Radial Gradients

Radial Gradient Examples

Conic Gradients

Gradient Tips

Border Properties

Border Properties

Border Styles

Border Width Values

Border Radius

Border Radius Syntax

Visual Examples

Creative Border Radius

Border Radius Tips

Practical Examples

Example 1: Card with Gradient Background

Example 2: Hero Section with Background

Example 3: Modern Button Styles

Live Button Examples

Session Summary

Key Points

Best Practices

Next Session Preview