CODEWITHSUNDEEP
html
till36
till36

Reputation: 75

Keep background-color while overlapping a picture

how can I overlap 

	<p style="background-color:red; width:168px; padding:10px; margin-top:-168px;" class="kasten">

this p tag on a picture and keep the background-color:red?

Because the background gets transparent when it overlaps the picture...

Thanks for your answers!

Cheers, Till

Upvotes: 1

Views: 1157

Answers (2)

Brandon Benefield
Brandon Benefield

Reputation: 1672

I can't figure out if you want the p elements background transparent or not so I'll give you two solutions.
If you want to keep the background, not transparent while overlapping:

HTML

<div id="overlap">
  <p>Hello everyone, my background is transparent</p>
</div>

CSS 

#overlap {
  background: url(http://www.gettyimages.com/gi-resources/images/Embed/new/embed2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100vh;
}

p {
  background-color: red;
  text-align: center;
  padding: 10px;
}

Now for a transparent background
HTML 

<div id="overlap">
  <p>Hello everyone, my background is transparent</p>
</div>

CSS 

#overlap {
  background: url(http://www.gettyimages.com/gi-resources/images/Embed/new/embed2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100vh;
}

p {
  background-color: red;
  text-align: center;
  padding: 10px;
}

So what we've done here is set a height for the background image, which you need at the moment because there is not much populating the div at the moment.
Then we set a background property, give it the url we want, in this case I chose a kitten, no-repeat center center fixed this is important because

  • no-repeat We do not want the image repeating
  • center We want the image to center horizontally and vertically
  • fixed You can remove this, I tend to but some like it

Next we need to set the background-size

  • background-size: cover Play with this, common values are contain and cover

Finally for our p tag.
What depending on what you want to achieve (transparent or not) is as simple as changing the background-color value.

  • background-color: red simple solid red background
  • background-color: rgba(255,0,0,.5) set the red, green, blue and alpha where alpha represent transparency.
  • Valid entries for alpha are 0 - 1, 1 being solid, 0 meaning transparent.

Upvotes: 2

Maarten van Tjonger
Maarten van Tjonger

Reputation: 1927

Instead of margin-top, try using:

position: relative;
top: -168px;

See: https://codepen.io/anon/pen/prvWVo

Upvotes: 2

Related Questions