Adjust background image opacity on bootstrap hero unit

Question

How can I edit my css to adjust the opacity on the background image in the hero unit without affecting the opacity of the text etc in the hero unit? Here is the draft site (yes i'll be paying for proper version of the photo): site

Why don't you just make it transparent in photoshop? (or something similar) — adaam, May 23 '13 at 19:33
I don't have photoshop and if grew impatient with GIMP rather quickly :) — vt97john, May 23 '13 at 21:35

score 2 · Answer 1 · answered May 23 '13 at 19:37

2

The easy answer is to take your .jpg, and create a .png with it that has your opacity already applied.

answered May 23 '13 at 19:37

Robert McKee

21,305
1
43
57

score 0 · Answer 2 · answered May 23 '13 at 20:17

0

One way would be to move your hero text outside of the hero unit and use position:relative to place it where you want...

CSS

.hero-unit {
  background-image:url('..');
  height:300px;
  opacity: .5;
}

h1 {
  position: relative;
  top: -350px;
  left: 40px;
  color:#fff;
}

HTML

<div class="container">
  <div class="hero-unit">
  </div>
  <h1>Hello Hero Text</h1>  
</div>

Demo on Bootply

This example assumes your hero text it contained in an H1, but it could be in any container outside of the hero.

answered May 23 '13 at 20:17

Carol Skelly

351,302
90
710
624

1

Thanks. The only concern I have with this is that I's be sort of breaking the standard bootstrap hero unit structure which could be risky for a css amateur like myself. I could see myself screwing up alignments and such as the site evolves. – vt97john May 23 '13 at 21:37

Adjust background image opacity on bootstrap hero unit

2 Answers2

CSS

HTML