Combine background size percentage, and background size cover
up vote
0
down vote
favorite
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.
css
asked Nov 8 at 6:51
dwjohnston
2,453104387
add a comment |
up vote
0
down vote
favorite
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.
css
asked Nov 8 at 6:51
dwjohnston
2,453104387
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)?
– Wais Kamal
Nov 8 at 6:53
@WaisKamal - I'm saying that it would be nice to have a property that allows me to specifiy which way it clips.
– dwjohnston
Nov 8 at 7:04
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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.
css
asked Nov 8 at 6:51
dwjohnston
2,453104387
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.
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> 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> 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> 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> css
css
asked Nov 8 at 6:51
dwjohnston
2,453104387
asked Nov 8 at 6:51
dwjohnston
2,453104387
asked Nov 8 at 6:51
dwjohnston
2,453104387
asked Nov 8 at 6:51
dwjohnston
2,453104387
asked Nov 8 at 6:51
dwjohnston
2,453104387
2,453104387
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)?
– Wais Kamal
Nov 8 at 6:53
@WaisKamal - I'm saying that it would be nice to have a property that allows me to specifiy which way it clips.
– dwjohnston
Nov 8 at 7:04
add a comment |
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)?
– Wais Kamal
Nov 8 at 6:53
@WaisKamal - I'm saying that it would be nice to have a property that allows me to specifiy which way it clips.
– dwjohnston
Nov 8 at 7:04
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)?
– Wais Kamal
Nov 8 at 6:53
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)?
– Wais Kamal
Nov 8 at 6:53
@WaisKamal - I'm saying that it would be nice to have a property that allows me to specifiy which way it clips.
– dwjohnston
Nov 8 at 7:04
@WaisKamal - I'm saying that it would be nice to have a property that allows me to specifiy which way it clips.
– dwjohnston
Nov 8 at 7:04
add a comment |
2 Answers
2
active
oldest
votes
up vote
1
down vote
I would consider a pseudo element that will be your background layer:
.box {
border: solid 2px red;
background-image: url('https://www.360nobs.com/wp-content/uploads/2016/02/lady-gaga.jpg');
background-size: 0 0;
display: inline-block;
margin: 2em;
position: relative;
}
.box:before {
content:"";
position:absolute;
top:0;
left:0;
right:50%;
bottom:0;
background-image:inherit;
background-size:cover;
}
.a {
width: 100px;
height: 200px;
}
.b {
width: 200px;
height: 100px;
}
.c {
width: 200px;
height: 200px;
}<div class="a box"> </div>
<div class="b box"> </div>
<div class="c box"> </div>answered Nov 8 at 14:39
Temani Afif
61.4k93572
add a comment |
up vote
-2
down vote
you can try to add background-attachment:fixed; to your background. hope it works.
answered Nov 8 at 6:58
JL Barcelona
334
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
I would consider a pseudo element that will be your background layer:
.box {
border: solid 2px red;
background-image: url('https://www.360nobs.com/wp-content/uploads/2016/02/lady-gaga.jpg');
background-size: 0 0;
display: inline-block;
margin: 2em;
position: relative;
}
.box:before {
content:"";
position:absolute;
top:0;
left:0;
right:50%;
bottom:0;
background-image:inherit;
background-size:cover;
}
.a {
width: 100px;
height: 200px;
}
.b {
width: 200px;
height: 100px;
}
.c {
width: 200px;
height: 200px;
}<div class="a box"> </div>
<div class="b box"> </div>
<div class="c box"> </div>answered Nov 8 at 14:39
Temani Afif
61.4k93572
add a comment |
up vote
1
down vote
I would consider a pseudo element that will be your background layer:
.box {
border: solid 2px red;
background-image: url('https://www.360nobs.com/wp-content/uploads/2016/02/lady-gaga.jpg');
background-size: 0 0;
display: inline-block;
margin: 2em;
position: relative;
}
.box:before {
content:"";
position:absolute;
top:0;
left:0;
right:50%;
bottom:0;
background-image:inherit;
background-size:cover;
}
.a {
width: 100px;
height: 200px;
}
.b {
width: 200px;
height: 100px;
}
.c {
width: 200px;
height: 200px;
}<div class="a box"> </div>
<div class="b box"> </div>
<div class="c box"> </div>answered Nov 8 at 14:39
Temani Afif
61.4k93572
add a comment |
up vote
1
down vote
up vote
1
down vote
I would consider a pseudo element that will be your background layer:
.box {
border: solid 2px red;
background-image: url('https://www.360nobs.com/wp-content/uploads/2016/02/lady-gaga.jpg');
background-size: 0 0;
display: inline-block;
margin: 2em;
position: relative;
}
.box:before {
content:"";
position:absolute;
top:0;
left:0;
right:50%;
bottom:0;
background-image:inherit;
background-size:cover;
}
.a {
width: 100px;
height: 200px;
}
.b {
width: 200px;
height: 100px;
}
.c {
width: 200px;
height: 200px;
}<div class="a box"> </div>
<div class="b box"> </div>
<div class="c box"> </div>answered Nov 8 at 14:39
Temani Afif
61.4k93572
I would consider a pseudo element that will be your background layer:
.box {
border: solid 2px red;
background-image: url('https://www.360nobs.com/wp-content/uploads/2016/02/lady-gaga.jpg');
background-size: 0 0;
display: inline-block;
margin: 2em;
position: relative;
}
.box:before {
content:"";
position:absolute;
top:0;
left:0;
right:50%;
bottom:0;
background-image:inherit;
background-size:cover;
}
.a {
width: 100px;
height: 200px;
}
.b {
width: 200px;
height: 100px;
}
.c {
width: 200px;
height: 200px;
}<div class="a box"> </div>
<div class="b box"> </div>
<div class="c box"> </div>.box {
border: solid 2px red;
background-image: url('https://www.360nobs.com/wp-content/uploads/2016/02/lady-gaga.jpg');
background-size: 0 0;
display: inline-block;
margin: 2em;
position: relative;
}
.box:before {
content:"";
position:absolute;
top:0;
left:0;
right:50%;
bottom:0;
background-image:inherit;
background-size:cover;
}
.a {
width: 100px;
height: 200px;
}
.b {
width: 200px;
height: 100px;
}
.c {
width: 200px;
height: 200px;
}<div class="a box"> </div>
<div class="b box"> </div>
<div class="c box"> </div>.box {
border: solid 2px red;
background-image: url('https://www.360nobs.com/wp-content/uploads/2016/02/lady-gaga.jpg');
background-size: 0 0;
display: inline-block;
margin: 2em;
position: relative;
}
.box:before {
content:"";
position:absolute;
top:0;
left:0;
right:50%;
bottom:0;
background-image:inherit;
background-size:cover;
}
.a {
width: 100px;
height: 200px;
}
.b {
width: 200px;
height: 100px;
}
.c {
width: 200px;
height: 200px;
}<div class="a box"> </div>
<div class="b box"> </div>
<div class="c box"> </div>answered Nov 8 at 14:39
Temani Afif
61.4k93572
answered Nov 8 at 14:39
Temani Afif
61.4k93572
answered Nov 8 at 14:39
Temani Afif
61.4k93572
answered Nov 8 at 14:39
Temani Afif
61.4k93572
61.4k93572
add a comment |
add a comment |
up vote
-2
down vote
you can try to add background-attachment:fixed; to your background. hope it works.
answered Nov 8 at 6:58
JL Barcelona
334
add a comment |
up vote
-2
down vote
you can try to add background-attachment:fixed; to your background. hope it works.
answered Nov 8 at 6:58
JL Barcelona
334
add a comment |
up vote
-2
down vote
up vote
-2
down vote
you can try to add background-attachment:fixed; to your background. hope it works.
answered Nov 8 at 6:58
JL Barcelona
334
you can try to add background-attachment:fixed; to your background. hope it works.
answered Nov 8 at 6:58
JL Barcelona
334
answered Nov 8 at 6:58
JL Barcelona
334
answered Nov 8 at 6:58
JL Barcelona
334
answered Nov 8 at 6:58
JL Barcelona
334
334
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53202737%2fcombine-background-size-percentage-and-background-size-cover%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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)?
– Wais Kamal
Nov 8 at 6:53
@WaisKamal - I'm saying that it would be nice to have a property that allows me to specifiy which way it clips.
– dwjohnston
Nov 8 at 7:04