Use one element with a comma-separated list of CSS background layers. Give each image its own position so one sits on the left and the other stays centered. This is the right approach when both images are decorative.
Put both decorative images on the same element
For two decorative pictures in a header, list both image URLs in a single background declaration:
As an Amazon Associate I earn from qualifying purchases.
#header {
min-height: 150px;
background:
url("left.png") left center / auto no-repeat,
url("title.png") center center / auto no-repeat,
#000;
}The first background layer is painted on top of the layers that follow it. Here, left.png is positioned at the left edge and vertically centered; title.png is centered in the header. The final color is the background color beneath the images.
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 →Keep the CSS in an external stylesheet as usual. Replace the example file names with paths that are correct relative to that stylesheet. The element also needs visible area: its content, padding, or a defined height must give the backgrounds somewhere to appear. The example uses min-height only as a starting point; choose dimensions and scaling for your own images and layout.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Why the second image replaces the first
A declaration such as background-image: url("first.png") specifies one image. If another single-image declaration later sets background-image, that declaration replaces the earlier value in the cascade. Neither image is added automatically.
To display both, put both URLs in one comma-separated list:
#header {
background-image: url("left.png"), url("title.png");
background-position: left center, center center;
background-repeat: no-repeat, no-repeat;
}The lists correspond by position: the first position and repeat value apply to the first image, and the second values apply to the second. When a background property has fewer comma-separated values than there are image layers, CSS repeats its values to cover the remaining layers. Listing each value explicitly makes the intended mapping easier to see.
Use background images only for decoration
CSS backgrounds are appropriate when the pictures are ornamental and do not convey information that visitors need. Assistive technologies do not announce CSS background images.
If either image communicates content—such as a meaningful logo or a title—use an HTML <img> with an appropriate alt value instead. If the image is artwork for a site title, provide the title’s meaning as document text or an accessible text alternative. Where the design allows it, ordinary HTML text is often more useful than an image of text.
When separate HTML images are a better fit
Use separate image elements or wrapper elements when the pictures carry meaningful content, need independent layout boxes, or need to behave differently from background layers. This gives each image a semantic place in the document and lets you provide alternative text. It can also be preferable when the project must support older browsers that do not handle multiple backgrounds.
Rank #4
For purely decorative art that should sit behind or around header content, multiple background layers are more concise. Choose between the approaches based on meaning, layout needs, overlap, sizing, and the project’s minimum browser support.
Browser support and layout checks
A 2012 SitePoint forum reply warned that multiple backgrounds might not work in older browsers, including IE8 and below. That is a historical warning, not a current compatibility summary. MDN describes background-image as widely available and says the feature has been available across browsers since July 2015. If legacy browser support matters, check the exact browsers your project targets.
Quick Recap
Best Value
- Confirm that each image path resolves from the external CSS file.
- Give the header visible dimensions through its content, padding, or sizing.
- Set
background-sizeif an image needs scaling; there is no universally correct value for unknown image dimensions. - Check the result at the viewport widths your layout must support, including whether the images overlap or crowd other header content.
Sources
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.
