Combine background size percentage, and background size cover

2080 views css
-2

Here, I have some divs of various sizes, and I'm applying a background image to them:

div {
  border: solid 2px red; 
  background-image: url('https://www.360nobs.com/wp-content/uploads/2016/02/lady-gaga.jpg'); 
  background-size: cover; 
  background-repeat: no-repeat; 
  
  display: inline-block; 
  margin: 2em;   

}

.a {
  width: 100px; 
  height: 200px; 
}

.b {
  width: 200px; 
  height: 100px ; 
}

.c {
  width: 200px; 
  height: 200px; 
}
<div class ="a"> </div> 
<div class ="b"> </div> 
<div class ="c"> </div> 

Now, I only want to display the image on the left half of the div, but I want it to cover the full height. The background shouldn't warp, instead it should zoom/stretch.

One way to do this is to add position right on it:

div {
  border: solid 2px red; 
  background-image: url('https://www.360nobs.com/wp-content/uploads/2016/02/lady-gaga.jpg'); 
  background-size: cover; 
  background-repeat: no-repeat; 
  
  display: inline-block; 
  margin: 2em;   

 background-position: top right 50px; //Actually in my situation I would just use vw; 

}

.a {
  width: 100px; 
  height: 200px; 
}

.b {
  width: 200px; 
  height: 100px ; 
}

.c {
  width: 200px; 
  height: 200px; 
}
<div class ="a"> </div> 
<div class ="b"> </div> 
<div class ="c"> </div> 

But the problem with this is that it only shows the right hand side of the image, whereas in my scenario I want it to either show from the left, or show from the center.

Is there a way to apply a clip to the background image? My alternative solution is to lay a div on top to hide it.

answered question

I don't get how you want it to show "either from the left or from the center". Can you please clarify that (I mean, when do you want it showing from the left and when to show it from the center)?

1 Answer

7

you can try to add background-attachment:fixed; to your background. hope it works.

posted this

Have an answer?

JD

Please login first before posting an answer.

Ads

Categories