Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create a Hero Image with CSS?

CSS Web Development Front End Technology

A hero image is a large, prominent image placed at the top of a webpage to grab visitors' attention. It typically includes overlay text and call-to-action buttons to engage users immediately.

Syntax

.hero-container {
    background-image: url('image-url');
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

Example

The following example creates a full-screen hero image with overlay text and a call-to-action button −

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body, html {
            height: 100%;
            margin: 0;
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .hero-container {
            background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
                              url("https://images.pexels.com/photos/670720/pexels-photo-670720.jpeg");
            height: 100vh;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .hero-content {
            text-align: center;
            color: white;
        }
        
        .hero-content h1 {
            font-size: 3.5rem;
            margin: 0 0 1rem 0;
            font-weight: bold;
        }
        
        .hero-content h2 {
            font-size: 1.5rem;
            margin: 0 0 2rem 0;
            font-weight: normal;
        }
        
        .hero-button {
            padding: 15px 30px;
            font-size: 1.2rem;
            background-color: #2980b9;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        
        .hero-button:hover {
            background-color: #3498db;
        }
    </style>
</head>
<body>
    <div class="hero-container">
        <div class="hero-content">
            <h1>Welcome to Our Website</h1>
            <h2>Creating Amazing Digital Experiences</h2>
            <button class="hero-button">Get Started</button>
        </div>
    </div>
</body>
</html>

A full-screen hero section appears with a background image of a mountain landscape. A dark overlay makes the white text clearly visible. The centered content displays "Welcome to Our Website" as the main heading, "Creating Amazing Digital Experiences" as a subtitle, and a blue "Get Started" button that changes color on hover.

Key Properties

Property Purpose
background-size: cover Scales the image to cover the entire container
background-position: center Centers the background image
height: 100vh Makes the hero section full viewport height
linear-gradient overlay Adds a dark layer to improve text readability

Conclusion

Hero images are essential for creating visually appealing landing pages. Use background-size: cover for responsive scaling and overlay gradients to ensure text readability across different image backgrounds.

Updated on: 2026-03-15T14:26:53+05:30

466 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements