Is there anyway to set background-size to both contain and cover?

Question

Here is a pen to my attempt https://codepen.io/alexyap/pen/VbvGvw

<div id="bg">
</div>



* {
  margin: 0;
  padding: 0;
}

#bg {
  background: url('https://static.pexels.com/photos/198747/pexels-photo-198747.jpeg');
  height: 60vh;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100vw;
}

I nearly had it figured out but I just can't seem to copy how this website https://sierradesigns.com/ did it (check slider images on landing page), mine is cut off on the bottom no matter what value i give the height

It would not be possible, they are two completely different treatments. The website you linked is using 100% width images, not backgrounds. — APAD1, Apr 18 '17 at 16:49
No, those two properties are opposites of each other in how they interpret the sizing. You have to pick one or the other. — TylerH, Apr 18 '17 at 16:50

score 2 · Accepted Answer · edited Dec 01 '17 at 21:42

By setting the background size to cover you are giving the browser the prerogative to adjust the image until it completely covers the area; it will ignore width and height values you assign.

With contain you allow the browser to decide how to adjust the image so that the entire image fits within the area, which may be based on height or width to accomplish this (depending on the orientation of the image wide or tall).

background-size: 100% 100% is probably what you're looking for, but that will disproportionately adjust the image (ie: stretch or compress depending on orientation). However, it does sound like that's what you want when you say "both cover and contain".

There are many ways to place and scale images used as backgrounds (where background does not necessarily mean the CSS background property)

Below is a simplified example of how I've accomplished this (assuming images that are roughly 700x300 px)

.container-wrap {
     width:100%;
     }
 .container {
     position:relative;
     padding:42.86% 0 0 0;
     /* where padding = the proportion of the images width and height
     which you can get by division: height / width = 0.42857 */
     }
 .container img {
     position:absolute;
     top:0px;
     right:0px;
     bottom:0px;
     left:0px;
     }

it is important that your images maintain a close proportion to each other -- if they are slightly off, the slight distortion shouldn't be visible to most people for most images

Again, there are other methods to accomplish this. The website you linked to applies a similar concept. The concept is the same, method is slightly different (for example they are using width:100% on the images instead of absolutely positioning them), where the concept = "using some sort of method to proportion the images to the container so it will magically scale"

Note that the same method can be applied to video containers (such as from YouTube).

so how do i achieve the effect the site i linked to is using? just do what APAD1 said and put in an img tag instead and set it's width to 100%? and oh i forgot to mention that when u resize the page https://sierradesigns.com/ the images on the slider scale perfectly (no cut-offs whatsoever) that's why i wanted to achieve something that contains as well as covers the browser window — Alex Yap, Apr 18 '17 at 17:24

score 0 · Answer 2 · answered Apr 18 '17 at 17:26

0

The page that you link is keeping the aspect ratio of the container constant.

You can get this effect using both vw units for width and height (for instance)

#bg {
  background: url('http://lorempixel.com/1000/600/');
  height: 30vw;
  width: 50vw;
  background-size: cover;
}

<div id="bg">
</div>

answered Apr 18 '17 at 17:26

vals

61,425
11
89
138

i'm sorry i forgot to mention that when you resize the page the images i mentioned scale perfectly as in no cut offs whatsoever, it's almost as if the images retain their height and width at all screen sizes, that is the effect i am going for, apologies it's pretty late here – Alex Yap Apr 18 '17 at 17:31
I used 50vw for the width to acomodate the snippet size. Set width: 100vw and height 60vw and you'll get full width – vals Apr 18 '17 at 17:41
i wouldn't consider that "working" if i were you then... see edits to my answer below – aequalsb Apr 18 '17 at 17:53
sorry about that, english isn't my first language and i was having trouble translating my message – Alex Yap Apr 18 '17 at 19:06

Is there anyway to set background-size to both contain and cover?

2 Answers2