Background-image cover doesn't work on smaller screens
up vote
1
down vote
favorite
EDIT : Fixed it by manually setting a width ( auto ) and a height as a background-size. ( background-size: auto 1100px; )
Hey I'd like to use an image as a background for my header.
Here's what it looks like now :
There's a navbar above that I can't really show and that's not really the point here.
Now here's my mobile version :
As you can see, there's a blank space that I don't want here. I've tried using vh/vw, setting the body height at 100%, but it doesn't work.
.home .part1-img-container {
min-height: 650px;
background-color: grey;
background: url(assets/img/brooklyn.jpg) no-repeat center center scroll;
background-size: cover;
background-repeat: no-repeat;
text-align: center;
/*padding-top: 70px;*/
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
margin-bottom: 10px;
background-position-y: -187px;
}<div class="part1 col-md-12 col-lg-12 p-0">
<div class="part1-img-container">
</div>
</div>There's a block of text in the header, but I'll take care of that, right now the problem is the blank space at the bottom, anyone can help me ?
Thanks a lot !
css background-image cover
asked Nov 8 at 13:10
Mael Landrin
277
|
show 2 more comments
up vote
1
down vote
favorite
EDIT : Fixed it by manually setting a width ( auto ) and a height as a background-size. ( background-size: auto 1100px; )
Hey I'd like to use an image as a background for my header.
Here's what it looks like now :
There's a navbar above that I can't really show and that's not really the point here.
Now here's my mobile version :
As you can see, there's a blank space that I don't want here. I've tried using vh/vw, setting the body height at 100%, but it doesn't work.
.home .part1-img-container {
min-height: 650px;
background-color: grey;
background: url(assets/img/brooklyn.jpg) no-repeat center center scroll;
background-size: cover;
background-repeat: no-repeat;
text-align: center;
/*padding-top: 70px;*/
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
margin-bottom: 10px;
background-position-y: -187px;
}<div class="part1 col-md-12 col-lg-12 p-0">
<div class="part1-img-container">
</div>
</div>There's a block of text in the header, but I'll take care of that, right now the problem is the blank space at the bottom, anyone can help me ?
Thanks a lot !
css background-image cover
asked Nov 8 at 13:10
Mael Landrin
277
1
have you tried to do this without setting amin-height
– Toxide82
Nov 8 at 13:13
The problem is clearly the min-height, I was added an answer but I misunderstood the question, so @Toxide82 seems to be right.
– Marcos Pérez Gude
Nov 8 at 13:15
Still doesn't work :/ I think the min-height sets the minimum height for the div, not for the background-image unfortunately
– Mael Landrin
Nov 8 at 13:16
I don't have a media query on that, I think I found a fix by manually setting the width and height of the background image, I'll update my original post !
– Mael Landrin
Nov 8 at 13:30
1
I have made a fiddle out of the code you have presented. Without background-position-y: -187px; it is working fine in mobile and desktop both. jsfiddle.net/51f7w6q0/13
– AKNair
Nov 8 at 13:33
|
show 2 more comments
up vote
1
down vote
favorite
up vote
1
down vote
favorite
EDIT : Fixed it by manually setting a width ( auto ) and a height as a background-size. ( background-size: auto 1100px; )
Hey I'd like to use an image as a background for my header.
Here's what it looks like now :
There's a navbar above that I can't really show and that's not really the point here.
Now here's my mobile version :
As you can see, there's a blank space that I don't want here. I've tried using vh/vw, setting the body height at 100%, but it doesn't work.
.home .part1-img-container {
min-height: 650px;
background-color: grey;
background: url(assets/img/brooklyn.jpg) no-repeat center center scroll;
background-size: cover;
background-repeat: no-repeat;
text-align: center;
/*padding-top: 70px;*/
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
margin-bottom: 10px;
background-position-y: -187px;
}<div class="part1 col-md-12 col-lg-12 p-0">
<div class="part1-img-container">
</div>
</div>There's a block of text in the header, but I'll take care of that, right now the problem is the blank space at the bottom, anyone can help me ?
Thanks a lot !
css background-image cover
asked Nov 8 at 13:10
Mael Landrin
277
EDIT : Fixed it by manually setting a width ( auto ) and a height as a background-size. ( background-size: auto 1100px; )
Hey I'd like to use an image as a background for my header.
Here's what it looks like now :
There's a navbar above that I can't really show and that's not really the point here.
Now here's my mobile version :
As you can see, there's a blank space that I don't want here. I've tried using vh/vw, setting the body height at 100%, but it doesn't work.
.home .part1-img-container {
min-height: 650px;
background-color: grey;
background: url(assets/img/brooklyn.jpg) no-repeat center center scroll;
background-size: cover;
background-repeat: no-repeat;
text-align: center;
/*padding-top: 70px;*/
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
margin-bottom: 10px;
background-position-y: -187px;
}<div class="part1 col-md-12 col-lg-12 p-0">
<div class="part1-img-container">
</div>
</div>There's a block of text in the header, but I'll take care of that, right now the problem is the blank space at the bottom, anyone can help me ?
Thanks a lot !
.home .part1-img-container {
min-height: 650px;
background-color: grey;
background: url(assets/img/brooklyn.jpg) no-repeat center center scroll;
background-size: cover;
background-repeat: no-repeat;
text-align: center;
/*padding-top: 70px;*/
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
margin-bottom: 10px;
background-position-y: -187px;
}<div class="part1 col-md-12 col-lg-12 p-0">
<div class="part1-img-container">
</div>
</div>.home .part1-img-container {
min-height: 650px;
background-color: grey;
background: url(assets/img/brooklyn.jpg) no-repeat center center scroll;
background-size: cover;
background-repeat: no-repeat;
text-align: center;
/*padding-top: 70px;*/
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
margin-bottom: 10px;
background-position-y: -187px;
}<div class="part1 col-md-12 col-lg-12 p-0">
<div class="part1-img-container">
</div>
</div>css background-image cover
css background-image cover
asked Nov 8 at 13:10
Mael Landrin
277
asked Nov 8 at 13:10
Mael Landrin
277
edited Nov 8 at 13:33
asked Nov 8 at 13:10
Mael Landrin
277
asked Nov 8 at 13:10
Mael Landrin
277
asked Nov 8 at 13:10
Mael Landrin
277
277
1
have you tried to do this without setting amin-height
– Toxide82
Nov 8 at 13:13
The problem is clearly the min-height, I was added an answer but I misunderstood the question, so @Toxide82 seems to be right.
– Marcos Pérez Gude
Nov 8 at 13:15
Still doesn't work :/ I think the min-height sets the minimum height for the div, not for the background-image unfortunately
– Mael Landrin
Nov 8 at 13:16
I don't have a media query on that, I think I found a fix by manually setting the width and height of the background image, I'll update my original post !
– Mael Landrin
Nov 8 at 13:30
1
I have made a fiddle out of the code you have presented. Without background-position-y: -187px; it is working fine in mobile and desktop both. jsfiddle.net/51f7w6q0/13
– AKNair
Nov 8 at 13:33
|
show 2 more comments
1
have you tried to do this without setting amin-height
– Toxide82
Nov 8 at 13:13
The problem is clearly the min-height, I was added an answer but I misunderstood the question, so @Toxide82 seems to be right.
– Marcos Pérez Gude
Nov 8 at 13:15
Still doesn't work :/ I think the min-height sets the minimum height for the div, not for the background-image unfortunately
– Mael Landrin
Nov 8 at 13:16
I don't have a media query on that, I think I found a fix by manually setting the width and height of the background image, I'll update my original post !
– Mael Landrin
Nov 8 at 13:30
1
I have made a fiddle out of the code you have presented. Without background-position-y: -187px; it is working fine in mobile and desktop both. jsfiddle.net/51f7w6q0/13
– AKNair
Nov 8 at 13:33
1
1
have you tried to do this without setting a
min-height– Toxide82
Nov 8 at 13:13
have you tried to do this without setting a
min-height– Toxide82
Nov 8 at 13:13
The problem is clearly the min-height, I was added an answer but I misunderstood the question, so @Toxide82 seems to be right.
– Marcos Pérez Gude
Nov 8 at 13:15
The problem is clearly the min-height, I was added an answer but I misunderstood the question, so @Toxide82 seems to be right.
– Marcos Pérez Gude
Nov 8 at 13:15
Still doesn't work :/ I think the min-height sets the minimum height for the div, not for the background-image unfortunately
– Mael Landrin
Nov 8 at 13:16
Still doesn't work :/ I think the min-height sets the minimum height for the div, not for the background-image unfortunately
– Mael Landrin
Nov 8 at 13:16
I don't have a media query on that, I think I found a fix by manually setting the width and height of the background image, I'll update my original post !
– Mael Landrin
Nov 8 at 13:30
I don't have a media query on that, I think I found a fix by manually setting the width and height of the background image, I'll update my original post !
– Mael Landrin
Nov 8 at 13:30
1
1
I have made a fiddle out of the code you have presented. Without background-position-y: -187px; it is working fine in mobile and desktop both. jsfiddle.net/51f7w6q0/13
– AKNair
Nov 8 at 13:33
I have made a fiddle out of the code you have presented. Without background-position-y: -187px; it is working fine in mobile and desktop both. jsfiddle.net/51f7w6q0/13
– AKNair
Nov 8 at 13:33
|
show 2 more comments
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53208458%2fbackground-image-cover-doesnt-work-on-smaller-screens%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
1
have you tried to do this without setting a
min-height– Toxide82
Nov 8 at 13:13
The problem is clearly the min-height, I was added an answer but I misunderstood the question, so @Toxide82 seems to be right.
– Marcos Pérez Gude
Nov 8 at 13:15
Still doesn't work :/ I think the min-height sets the minimum height for the div, not for the background-image unfortunately
– Mael Landrin
Nov 8 at 13:16
I don't have a media query on that, I think I found a fix by manually setting the width and height of the background image, I'll update my original post !
– Mael Landrin
Nov 8 at 13:30
1
I have made a fiddle out of the code you have presented. Without background-position-y: -187px; it is working fine in mobile and desktop both. jsfiddle.net/51f7w6q0/13
– AKNair
Nov 8 at 13:33