Member Avatar for EvaBozh

I am making a web-site, and I have to make my background images darker.

http://jsfiddle.net/EveBozh/48ah63bp/

And one more. How can I put the text on the image?

Can someone please help me? Thank you!

  • 2 Contributors
  • 1 Reply
  • 199 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

Three practical ways to darken a background image and keep readable text on top. — because your fiddle didn’t load here, try these locally. is right that pre-darkening the image (image editor or server-side) is the simplest and fastest; below are pure-CSS options that fit nicely into a Bootstrap 3.2 layout if you prefer to keep the original image file.

A single-line CSS gradient over the background is the cleanest and requires no extra markup:

.hero {
  background-image:
    linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
    url('path/to/image.jpg');
  background-size: cover;
  background-position: center;
}
.hero .container { position: relative; z-index: 2; color: #fff; }

If you need more control (fade, different opacities, animation), use an absolutely positioned overlay element so the content stays above it:

<div class="hero">
  <div class="overlay"></div>
  <div class="container">
    <h1>Title</h1>
    <p>Subtitle</p>
  </div>
</div>

.hero { position: relative; background: url('...') center/cover no-repeat; }
.hero .overlay {
  position:absolute; top:0; right:0; bottom:0; left:0;
  background: rgba(0,0,0,0.5); z-index:1;
}
.hero .container { position: relative; z-index:2; color:#fff; }

If you use an inline <img> instead of a CSS background, filter: brightness() works but can be heavier on rendering:

.bg-img { width:100%; display:block; filter: brightness(50%); -webkit-filter: brightness(50%); }

Tips: prefer real HTML text (not baked into the image) for accessibility and SEO; ensure contrast (text color, text-shadow) so small text remains readable; use background-size: cover for responsive fills; and fall back to a solid background-color for older browsers. If performance or exact color control matters, pre-darkening the source image (as suggested) is a perfectly valid approach.

Member Avatar for Member #120589

THe fiddle doesn't show anything. Pretty pointless.
Can you use an image editing program to darken the image and serve that? That will avoid having to make an on-the-fly transformation on page loads. Also is the text static? If so perhaps having a static image with the text on it would be easier. You don't give an info with regard to your needs so difficult to suggest a solution.

You can apply text server side with php's gd commands.
You can over lay text very easily using css /js.
JS libraries can use darken as can css.

So more info please.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.