Styling full-width banner images in CMS web pages

Many modern website designs make use of a graphic banner at the top of the page which spans the full page width, scales automatically with changes in the browser window width, and which has content (like titles) overlaid on top of it. A CSS background image can be used to achieve these effects.

The HTML markup is simple: an overall "banner" container, within that is a "banner-image" element whose background will be the image, and inside that is a "banner-content" element that holds the overlaid content.

<div class="banner">
    <div class="banner-image">
        <div class="banner-content">
        </div>
    </div>
</div>

The CSS for styling the image set the banner height, the image url, the positioning of the image relative to the banner-image element, and rules for scaling.

background-size: cover will scale the image so that it covers the full width and height of the element without distorting the image. If the element's dimensions aren't the same ratio as the images, the image will be cropped on either the top and bottom or left and right sides.

background-position controls how the image gets cropped. In this example, a point that is 50% of the images width from the left edge, and 30% from the image's top, will be fixed to a point that is 50% from the left and 30% from the top of the banner-image element.

These two styles are the ones you'll need to adjust based on the image you're working with.

For background-container, the example creates a box that is 1170px wide, positioned 20px down from the top of the background image, and centered horizontally. (auto margins for left and right will center the element.)

<style>
.banner-image {
    background-image: url("/media/architecture.jpg");
    background-position: left 50% top 30%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px;
}

.banner-content {
    width: 1170px;
    margin: 20px auto;
}

@media (max-width: 767px) {
    .banner-image {
        background-position: center; 
    }
    .banner-content {
        width: 100%;
    }
}
</style>

The @media rule at the end adjust the styles for small devices, using 767px or narrower as the breakpoint for changing the style. The image's position is changed to be centered, and the content is changed to be full width instead of fixed at 1170px. Typically, several media rules would be used for different breakpoints to adjust the size and position of the banner content.