How to Dynamically Align Background Images Based on Content Height with CSS & Container Queries
This guide explains how to make a background image automatically adjust its position—centering when the title is short and anchoring to the bottom right when the title is long—using plain CSS, a tiny JavaScript toggle, and modern container queries for responsive components.
Background
A teammate needed a background image that intelligently changes its display position according to the height of the title text: when the title is short, the image should be centered and cropped vertically; when the title is long, the image should stick to the bottom‑right corner.
Basic CSS Review
The background of a div is controlled by CSS background ‑related properties. The key properties are: background-image: sets the image URL. background-size: defines how the image scales (e.g., cover, contain). background-repeat: determines tiling ( no-repeat or repeat). background-position: places the image (e.g., right bottom, 50% 100%).
All these can be combined into a single shorthand declaration:
background: #fff url('your-image.jpg') right center / cover no-repeat;The syntax is:
background: [background‑color] [background‑image] [position] / [size] [repeat];Implementation with CSS + JavaScript
The effect can be achieved by toggling a class based on the content height. When the content height exceeds the image height, add a class that moves the background to the bottom‑right.
<div class="card auto-align">
<h2>Title that may span multiple lines</h2>
</div>.card {
width: 100%;
min-height: 200px;
padding: 16px;
background: #fff url('@/assets/svg/bg.svg') no-repeat center right/446px 326px;
transition: background-position 0.3s ease;
}
.card.bottom‑align {
background-position: bottom right; /* when content is tall */
}const card = document.querySelector('.card');
const contentHeight = card.scrollHeight;
const threshold = 326; // image height in pixels
if (contentHeight > threshold) {
card.classList.add('bottom‑align');
} else {
card.classList.remove('bottom‑align');
}Using Container Queries
Instead of JavaScript, modern container queries can react to the size of the parent element. First, enable container queries on the element:
.container {
container-type: inline-size; /* or size for both dimensions */
container-name: card-container;
}Then write rules that change the background when the container reaches a certain height:
@container (min-height: 300px) {
.card {
background: url('https://picsum.photos/id/1015/800/400') right bottom / cover no-repeat;
}
}If a custom container name is set, the query can be scoped:
@container card-container (min-height: 300px) { ... }Browser Compatibility
Chrome 105+ (2022) – ✅ supported
Edge 105+ (Chromium) – ✅ supported
Safari 16+ (2022) – ✅ supported
Firefox 110+ (2023) – ✅ supported
Opera 91+ – ✅ supported
IE 11 – ❌ not supported (never will be)
Android Browser (based on Chrome) – ✅ supported
iOS Safari 16+ – ✅ supported
Full Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Smart Background Positioning</title>
<style>
.card {
container-type: size;
background: url('https://picsum.photos/id/1015/800/400') right center / cover no-repeat;
padding: 20px;
border-radius: 8px;
color: #fff;
font-family: sans-serif;
margin-bottom: 40px;
}
@container (min-height: 300px) {
.card {
background: url('https://picsum.photos/id/1015/800/400') right bottom / cover no-repeat;
}
}
</style>
</head>
<body>
<div class="card">
<h2>This is a very long title that may wrap onto multiple lines, used to test the background‑image moving to the bottom‑right when the content is tall.</h2>
</div>
</body>
</html>Container queries provide a clean, CSS‑only solution, but be aware of the compatibility table above when targeting older browsers.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Rare Earth Juejin Tech Community
Juejin, a tech community that helps developers grow.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.