Image Background Overlay

This background style uses an image with a dark overlay to improve text readability, ideal for hero sections.

HTML

<div class="ss-bg image">
  Image Background
</div>

<div class="ss-bg image">
  Image Background
</div>

CSS

.ss-bg.image{
  padding:27px;
  background:
    linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),
    url('https://via.placeholder.com/1200x600');
  background-size:cover;
  background-position:center;
  border-radius:11px;
  color:#ffffff;
}

.ss-bg.image{
  padding:27px;
  background:
    linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),
    url('https://via.placeholder.com/1200x600');
  background-size:cover;
  background-position:center;
  border-radius:11px;
  color:#ffffff;
}

Notes

• Improved text contrast
• Hero-section ready
• Responsive image
• Modern layout

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.