Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
To create a website thumbnail background, first decide whether the image is decorative or whether it communicates what the page is about. Use CSS background-image for decoration behind text or other content. Use an HTML <img> with useful alternative text when the image itself conveys information. In either case, choose the crop for the thumbnail’s actual shape, keep the focal subject visible at smaller sizes, and test the result in the layouts where it will appear.
Decide what the thumbnail image is for
“Thumbnail background” can describe two different things: an image used as a decorative background inside a website card, or a thumbnail image that represents a page or article. The right implementation depends on whether a visitor needs the image to understand the content.
Decorative background: use CSS
Use a CSS background when the image adds atmosphere or visual styling but is not itself essential information. For example, a colored photograph behind a card title can be decorative if the title and surrounding content already tell visitors what the card links to. Set a background color as a fallback for the interval before the image loads or if it is unavailable.
Meaningful thumbnail: use an image element
If the thumbnail identifies a product, illustrates a subject, or otherwise adds information a visitor needs, use an HTML image element and provide an appropriate text alternative. CSS backgrounds are not exposed to assistive technology as image content. MDN Web Docs explains: “Browsers do not provide any special information about background images to assistive technology.”
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
For a content image, an alt value should describe the useful information conveyed by the image in its context. If the image is purely decorative and the surrounding text already provides the same information, use an empty alternative, alt="", rather than making screen-reader users encounter redundant text.
Choose the image and crop for the actual card
Start with the dimensions and shape of the space that will display the thumbnail—not just the image file you happen to have. A wide card, a square tile, and a narrow mobile layout can crop the same image in different ways. Pick a source with enough detail for its intended display size and a focal point that can remain visible when the sides or top and bottom are cropped.
- Decide the container’s aspect ratio based on your design, rather than assuming there is one universal website-thumbnail size.
- Prefer a source image with the subject positioned so that a moderate crop does not remove essential details.
- Do not force an image into a different ratio by stretching it. Crop it or allow it to preserve its proportions.
- Preview the image at the actual card dimensions and at narrower viewport widths before publishing.
Google’s image guidance recommends representative, high-resolution images and avoiding extreme aspect ratios for previews. It does not prescribe one universal pixel dimension, and the choice of size depends on the layout and preview surface.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Build a decorative thumbnail background with CSS
This example gives a card an intentional ratio, a fallback color, a cover crop, and an adjustable focal point. Replace the sample image URL with your own image. The title is ordinary page content rather than information embedded only in the background.
<article class="story-card">
<h2>A guide to growing herbs indoors</h2>
<p>Simple steps for a brighter windowsill garden.</p>
</article>
<style>
.story-card {
aspect-ratio: 16 / 9;
min-height: 12rem;
padding: 1.5rem;
display: flex;
flex-direction: column;
justify-content: end;
color: white;
background-color: #33443b;
background-image:
linear-gradient(0deg, rgb(0 0 0 / 68%), rgb(0 0 0 / 0%) 75%),
url("/images/indoor-herbs.jpg");
background-size: cover;
background-position: center 40%;
}
</style>What the CSS does
aspect-ratiodefines the intended shape of the card. It is a design choice, not a mandated thumbnail standard.background-colorshows beneath the image if it has not loaded or cannot be displayed.background-size: coverfills the card while preserving the image’s proportions. Some of the source may be cropped.background-positionshifts the crop to keep the subject in view. Adjust it for the source image—for example,center 40%moves the visible area upward relative to centered positioning.- The gradient helps separate white text from a busy image, but it does not remove the need to check text contrast.
Check text over the actual image, not only over a flat-color preview. MDN’s guidance notes WCAG contrast thresholds of 4.5:1 for body text and 3:1 for large text. A darker overlay can help, but verify the text against the brightest or most detailed areas that remain visible.
Use a responsive HTML image for informative thumbnails
If the image conveys information, put it in the document as an image rather than using it only as a CSS background. A simple responsive example is:
Rank #2
<article class="story-card">
<img
src="/images/indoor-herbs-800.jpg"
alt="Basil, mint, and thyme growing in pots on a sunny windowsill"
width="800"
height="450"
>
<div class="story-card__text">
<h2>A guide to growing herbs indoors</h2>
<p>Simple steps for a brighter windowsill garden.</p>
</div>
</article>
<style>
.story-card {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #33443b;
}
.story-card > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 40%;
}
.story-card__text {
position: absolute;
inset: auto 0 0;
padding: 1.5rem;
color: white;
background: linear-gradient(transparent, rgb(0 0 0 / 75%));
}
</style>The image’s width and height attributes describe its intrinsic dimensions; CSS controls how it is displayed in the card. object-fit: cover fills the fixed-ratio frame without distorting the image, and object-position controls the focal crop. For responsive delivery, provide image variants with srcset and, where suitable, sizes; use a fallback src so browsers have a default image. Use <picture> when you need to offer different image sources, such as art-directed crops for different layouts.
W3C’s responsive-image technique describes constraining images to available space with max-width and height so they adapt to narrow viewports and zoom without overflowing. Google recommends standard image elements for image discovery and says it does not index CSS images. If search discovery of the image matters, do not rely on a CSS background alone.
Keep the crop usable on narrow screens
A crop that works in a desktop-wide card may hide the subject in a narrow card. Test the image at the widths your layout actually uses, paying attention to faces, product labels, and any other important focal details. For a background, adjust background-position; for an image element, adjust object-position. If the focal point cannot survive the same crop at both wide and narrow sizes, use a different source or art-direct a separate crop with <picture>.
For fluid image content outside a fixed-ratio card, a basic responsive rule is:
img {
max-width: 100%;
height: auto;
}This preserves the image’s proportions as it scales down. For a thumbnail frame that intentionally crops to a chosen shape, use a frame ratio and object-fit: cover instead of allowing the image to stretch.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Set page-preview metadata separately
A visual background inside a page is not the same thing as the image selected for that page’s share or search preview. Open Graph defines og:image as page-preview metadata, with optional image width, height, and alt metadata. For example:
<meta property="og:image" content="https://example.com/images/indoor-herbs-preview.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Pots of herbs on a sunny windowsill">Use a representative image and metadata that describe the intended preview. Google lists og:image as one way to indicate a preferred image, but its image selection is automated; setting metadata does not guarantee that every platform or search surface will show that exact image. Treat the on-page CSS or HTML image and the page’s preview metadata as separate jobs.
Performance and fallback considerations
Use an image with enough resolution for its rendered size without shipping unnecessarily large files. Responsive image variants can let browsers choose an appropriate source for the available space. For either a CSS background or an image element, keep a fallback available: a CSS color beneath a decorative image, or a valid fallback src for an image element. Test a failed or delayed image load so text and card layout remain understandable.
If the image is content rather than decoration, prefer an image element so it can have an alternative text value and be discoverable as image content. If it is visual styling, CSS is appropriate, but do not place essential information only in the background. No one format or pixel dimension is best for every layout; choose based on the image, display size, and delivery context.
Troubleshoot common thumbnail problems
The subject is cut off
Cause: A cover crop fills the frame by removing part of the source image, and its focal point may not be centered. Fix: Change background-position or object-position, choose a source with more space around the subject, or provide a distinct crop for the narrower layout.
The image looks stretched
Cause: The image is being forced to the frame’s width and height without preserving its proportions. Fix: For an image element, use object-fit: cover when cropping is acceptable, or preserve the natural ratio with height: auto. For a CSS background, use background-size: cover or another deliberate sizing behavior rather than stretching it to both dimensions.
Text is difficult to read
Cause: The image has bright or busy areas behind the text, or the fallback appearance was not checked. Fix: Add or strengthen a gradient or overlay, reposition the focal image, and check contrast over the visible crop rather than judging from the source file alone.
Rank #4
The thumbnail is blank
Cause: The image could not load, its URL is wrong, or a background has no fallback color. Fix: Confirm the asset path and that the image is available to the page; set a background color for CSS, or a valid fallback src for an image element. Check that text and layout remain useful if the image stays unavailable.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →The image does not appear in image discovery or page previews
Cause: A CSS background is being used for content that should be represented as an image, or the page-preview metadata is missing or points to a different image. Fix: Use an HTML image element when the image itself matters for content discovery, and configure og:image separately for the share preview. Metadata can influence preview selection but cannot guarantee the result on every surface.
Or skip the browser setup
If you need a rendered screenshot of a page as a thumbnail asset, ScreenshotNeo can return one with a single request. For example, this cURL call captures a page to WebP:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. Equivalent Python and Node.js examples:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo accepts cookie or consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; those steps can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and responses include X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for AI agents and MCP clients. The free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000 screenshots. Learn more at ScreenshotNeo, or sign up free for 1,000 screenshots a month with no card.
Frequently Asked Questions
Does a CSS background image have alt text?
No. If an image conveys information that visitors need, use an HTML image element and give it an appropriate text alternative.
Is there one standard thumbnail size for every website?
No. Choose dimensions and an aspect ratio for the specific card, layout, and preview surface where the image will appear.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
