0

Im trying to design a home page for my website where im using a div to show an illustration.

i want to use an image with the div that covers the entire size of the div.

the image dimensions are 1920x850.

this is the code for the div

<div class="custom-col col-md-12 col-sm-12"  id="widget-static-block-1"></div>

the css: 

#widget-static-block-1 {
 background: url({{ d_banner1.jpg' | asset_url }}); 
 width:100%; }

i want to be able to view the image on different screen sizes , but the it always gets cut off (either height or width)

ive tried playing around with height and width attributes to no luck.

If i set height:850px; then obviously it shows perfectly on a 1080p sceen but gets cut off on a smaller screen.

One thing i want to be clear about is that i want the entire image to show at all times at all browser sizes, i dont want it to be cut off via height or width.

drarkayl
  • 1,017
  • 7
  • 17

3 Answers3

1

Try background-size: 100% 100% or background-size: 100vw 100vh. If you want to be certain your div suits every media you can use vw and vh units.

Kamila Korzec
  • 99
  • 5
  • background-size: 100%. is also not working. the only way i see the entire image is if i set the `hieght:850px;` but then i cant resize it – drarkayl Jul 25 '16 at 13:05
0

It seems like you're asking for the div to fill the parent (height or width). And if you don't want the background image to appear cropped, you need to maintain the aspect ratio.

This looks what you need: Maintain aspect ratio of div but fill screen width and height in CSS?

Community
  • 1
  • 1
Leif Jones
  • 320
  • 6
  • 21
0

Working example

Add styles to div with background:

background-repeat: no-repeat;
background-position: center center;
background-size: cover;

You can resize window to see result.

html, body {
  position: relative;
  height: 100%;
  margin: 0;
}

div {
  position: absolute;
  width: 100%;
  height: 100%;
  
  top: 0;
  left: 0;
  
  background: url('http://ghk.h-cdn.co/assets/16/09/980x490/landscape-1457107485-gettyimages-512366437.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
<div>

</div>
3rdthemagical
  • 5,271
  • 18
  • 36