CODEWITHSUNDEEP
csstwitter-bootstrap
Delete me
Delete me

Reputation: 597

Background images rounded cornes

I want to make rounded cornes on this background images. But it seems to effect the div box instead.

<div class="watermark">
<div class="watermark-image" style="background-image:url({{blogthreadlist.blogUri}});"></div>
<div class="col-md-12">Something else</div>
<div class="col-md-12">Something more..</div>
<div class="col-md-12">Something at the end</div>


.watermark {
  display: block;
  position: relative;
}

.watermark-image {
  content: "";
  opacity: 0.2;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

How do I round the cornes of the images and not the div box? The div i larger than the picture..

Upvotes: 0

Views: 59

Answers (3)

m4n0
m4n0

Reputation: 32315

You can have a separate <img> tag for the image and set a border-radius

<div class="watermark-image"><img class="rounded-img" src="{{blogthreadlist.blogUri}}"></img></div>

CSS 

.rounded-img {
  border-radius: 3px;
}

Upvotes: 1

Mohamed Wazil
Mohamed Wazil

Reputation: 61

Use this 

 .watermark-image {
  content: "";
  opacity: 0.2;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
  border-radius:50px;
}

Upvotes: 0

stanze
stanze

Reputation: 2480

Rounded Corner for image, try this Demo

<div class="watermark-image" style="background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNbB93-oZdCcp-OwO5m05v07sAJe42lOpOy8dRnT3aZ8uArqZJ);background-repeat: repeat-x;border-radius: 5px;"></div>

Upvotes: 0

Related Questions