CODEWITHSUNDEEP
htmlcss
Renzous Rakesh
Renzous Rakesh

Reputation: 155

Fixed background image for a div

I have created a image tile for which i have set a background image. But when i re-size the tile image on the background also gets re-sized, is there a way to make the background image stay to full image regardless of the tile size. The ratio doesn't matter. I only need the tile to display the full image.

.activity-image {
  border-radius: 12px;
  width: auto;
  height: 210px;
  background-image: url('http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.jpg');
  background-size: cover;
}
.tile {
  background-color: #ffffff;
  border-radius: 12px;
  height: auto;
  margin: 0 auto;
}
<div class="tile">
  <div class="activity-image "></div>
</div>

jsfiddle - https://jsfiddle.net/9hy3mcun/8/

Upvotes: 1

Views: 48

Answers (3)

Yasin Yaqoobi
Yasin Yaqoobi

Reputation: 2040

You can specify min-width for activity-image and set .title to overflow:hidden. 

 .activity-image{
    border-radius: 12px;
    width: auto;
    height: 210px;
    background-image: url('http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.jpg');
    background-size: cover;
    background-repeat: no-repeat; 
    min-width: 900px; 
  }

   .tile{
    background-color: #ffffff;
    border-radius: 12px;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
  }

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122027

You can use background-size: 100% 100% instead. First value is width and second is height of background.

 .activity-image {
   border-radius: 12px;
   width: auto;
   height: 210px;
   background-image: url('http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.jpg');
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
<div class="tile">
  <div class="activity-image "></div>
</div>

Upvotes: 2

Derek Story
Derek Story

Reputation: 9583

Do you mean background-size: 100% 100%;?

JS Fiddle

Upvotes: 2

Related Questions