HubSpot CSS Background Position Guide

Mastering CSS background-position is essential for designers, developers, and marketers who want pixel-perfect layouts and polished landing pages in HubSpot or any modern CMS. This guide walks through every value, pairing, and technique you need to control background images precisely across devices.

The background-position property defines where a background image sits inside its container. Combined with background-size, you can control cropping, focal points, and responsive behavior without extra HTML elements.

What Is CSS background-position in HubSpot Pages?

On a HubSpot page or template, background-position tells the browser exactly where to place a background image inside a section, column, or module. This is especially useful when using hero images, banners, and feature blocks that rely on clean visual alignment.

The basic syntax is:

selector {
  background-image: url("image.jpg");
  background-position: center center;
}

You can define position with:

• Keywords (like top, center, bottom)
• Length units (like px, em)
• Percentages (like 50% 50%)
• Combinations of keywords and values

Core background-position Syntax Explained for HubSpot Users

When editing a custom module or stylesheet for a HubSpot theme, you can apply background-position to any element with a background image. The property accepts one or two values.

Single-value background-position

If you pass one value, the browser interprets it as the horizontal position, with the vertical position defaulting to center. For example:

.hero-banner {
  background-position: center;
}

Common single-value keywords:

• left
• center
• right
• top (vertical)
• bottom (vertical)

When only one keyword is used:

• left, center, or right aligns horizontally, vertical becomes center.
• top or bottom aligns vertically, horizontal becomes center.

Two-value background-position

Two values let you control both horizontal and vertical alignment, which is crucial for fine-tuning backgrounds on HubSpot landing pages and blog templates.

.hero-banner {
  background-position: right top;
}

Format options include:

• Keyword + keyword: left top, center bottom
• Keyword + length: left 20px, center 3em
• Keyword + percentage: left 30%, center 70%
• Length + length: 10px 50px
• Percentage + percentage: 30% 50%

Keyword Values You Can Use in HubSpot CSS

Whether you add CSS in a HubSpot design manager file or inline in a custom module, the accepted keyword values are the same:

• left
• center
• right
• top
• bottom

These keywords can be mixed and matched:

.section-hero {
  background-position: center top;
}

.section-footer {
  background-position: right bottom;
}

For marketing teams using HubSpot templates, these simple keyword pairs are often enough to keep key focal points like faces or product shots visible.

Using Percentages for Precise Control in HubSpot Layouts

Percentages give fine-grained control over how the image aligns inside the container, making them ideal for responsive HubSpot pages.

Example:

.feature-block {
  background-position: 20% 30%;
}

How it works:

• The first value (20%) is horizontal: 0% is the left edge, 100% is the right edge.
• The second value (30%) is vertical: 0% is the top, 100% is the bottom.

The browser aligns that point of the image to the corresponding point of the container. This is useful when you want a specific point of a background image (like a product in the frame) to stay within view in a HubSpot hero section.

Common percentage-based patterns

• 0% 0% → top left
• 50% 50% → perfectly centered
• 100% 100% → bottom right
• 30% 50% → slightly left, vertically centered

Mixing Keywords, Lengths, and Percentages in HubSpot Stylesheets

Advanced HubSpot theme developers often mix units to keep designs flexible yet controlled. CSS lets you combine keywords with lengths or percentages for more nuanced alignment.

Examples:

.banner {
  background-position: left 40px;   /* left edge, 40px from top */
}

.card {
  background-position: right 20%;   /* right edge, 20% from top */
}

Rules to remember:

• If you supply a single horizontal value with an offset, the omitted vertical value defaults to center.
• If a vertical keyword appears first, the horizontal defaults to center unless you specify otherwise.

Practical HubSpot Examples with background-position

Below are common layout patterns that translate well into HubSpot custom modules and sections.

1. Centered hero background

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

This keeps the focal point near the middle, great for HubSpot hero sections with overlay text.

2. Left-focused product image

.product-strip {
  background-image: url("product.jpg");
  background-size: cover;
  background-position: 20% center;
}

Use this when the subject sits left in the frame and you want it visible across screen sizes.

3. Top-aligned brand pattern

.pattern-header {
  background-image: url("pattern.svg");
  background-repeat: repeat-x;
  background-position: top center;
}

Ideal for decorative headers in HubSpot blog templates.

Responsive Tips for HubSpot Background Images

Because HubSpot pages are often viewed on multiple devices, pairing background-position with responsive CSS is key.

Combine background-size and background-position

Highly recommended pattern:

.responsive-hero {
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
}

cover resizes the image to fill the container, while background-position controls where the cropping happens.

Use media queries in HubSpot themes

In your HubSpot stylesheet, you can adjust the position at different breakpoints:

.hero {
  background-position: 30% center;
}

@media (max-width: 768px) {
  .hero {
    background-position: center top;
  }
}

This lets you maintain brand consistency while optimizing the view on mobile devices.

Where to Learn More Beyond HubSpot

For the official CSS reference behind these techniques, see the original article on CSS background-position on HubSpot’s blog, which details all property values and browser behavior.

If you want strategic help applying these CSS techniques to larger marketing systems, funnels, and CRM workflows alongside HubSpot, you can also review consulting services from Consultevo.

Summary: Using HubSpot and CSS for Better Backgrounds

Understanding background-position helps you create clean, consistent designs across your entire site, whether it is managed in HubSpot or another platform. By combining keywords, percentages, and responsive media queries, you can keep the most important parts of any background image visible and on-brand on every device.

Use this guide as a quick reference whenever you configure hero modules, banners, and background-heavy layouts so your HubSpot pages look sharp, professional, and conversion-focused.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`