I am having this problem, I have an image that I want to get full widht and height of a div showing always the center of the image, and it works perfectly on desktop browsers, even when I resize the window to a mobile size, but in Android browser it always shows the right side of the image and I cant achieve to make it work.
Here is the code:
<div class="main-content" style="background-image: url(<?php echo get_field('imagen_portada')?>)">
And the CSS:
.main-content {
width: 100%;
background-size: cover;
background-position: center;
min-height: 100vh;
}
To me it doen't make any sense that this is not working.
EDIT: BTW, if I use "background-position: left" the image get shrinked and if I use right the image just don't show at all, all of this in Chrome for Android, in desktop browser it all works just as it should.
background-size: cover used in combination with background-position: center to zoom/scale the background images. For full-width/fit-to-screen background image, you can use background-size: 100% 100% or background-size: 100vw 100vh. Look at this post to understand the difference between cover and 100%?
.main-content {
background: url("//via.placeholder.com/1000/4B89DA/4B89DA") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
width: 100vw;
min-height: 100vh;
}
<div class="main-content"></div>
Related
So I have a full screen background set up like so:
#div {
background-image: url("images/slide1.jpg");
background-position: center 20%;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
}
The background image resizes according to all view ports sizes, but when I view the site from my mobile, it seems to be displaying a very small section of the whole image - basically the background-size: cover; rule doesn't seem to working. It should also be noted that if I make the window on my computer phone size, the background resizes properly. It also resizes properly when I view it using the responsive display tool 'responsivetest.net'. Just not when I actually open it on a phone.
Any suggestions are, as always, much appreciated.
I'm doing something similar for a portfolio site that's in development and it works fine on mobile. Here's my working code for CSS:
display: table;
width: 100%;
height: auto;
padding: 100px 0;
background: url(../img/bbg1.jpg) no-repeat bottom center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
So you can see some things you can try changing, such as the display height.
Test this site on your mobile device
!my present design**i have designed a website like this.
**
it is working fine for my screen resolution. the bottom div is half way up on the background image and half way down from the background image. my problem is when i test this for higher resolution screen it is not looking the same. the image is moving down. this is my css
body
{
background: #ffffff url(../images/11.jpg) no-repeat center top 0%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 75%;
font-family: Arial;
}
the bottom div css
.banner {
width: 100%;
min-height: 300px;
height: 100%;
background-color: #ffffff;
}
how to set this same for all screen sizes.
You say the image is moving down, do you mean when you scroll the image moves but you want it static? If so you could add background-attachment:fixed; to the body's CSS.
That's because the proportion of the image doesn't let the image fit the whole screen.
set the
body {
...
width : 100%;
height : 100%;
}
Ok so what I mean is, I want my background image to stay and the content in the div to scroll as more content inside is added.
see I don't want this to scroll
http://codepen.io/anon/pen/gLCns/
see kind of like the content on the codepen where you scroll in each window but it doesn't flow all over just in that window
you can use background-attachment: fixed; property to fix the background image.
html {
width: 100%;
height: 100%;
background: url(http://lorempixel.com/400/400) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.content{
position: absolute;
background-color: rgba(255,255,255,0.7);
width:50%;
height:1020px;
left:20px;
top:20px;
}
Here is a Demo.
The background-attachment property is what controls if the background image scrolls or stays.
http://www.w3schools.com/cssref/pr_background-attachment.asp
So in the CodePen it has background-attachment:fixed; and the image stays put while the content above it scrolls.
Then you simply center the content container on the page, leaving off overflows, and as the content grows the page will scroll but the background is fixed.
OK, first your code is a mess. I recommend running your code through the w3 validator first.
You have two options to do what you want, either using the background fixed & cover that you already have answers for:
html {
width: 100%;
height: 100%;
background: url(image_URL) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
or using overflow on the div with the content.
#content {
width: 600px;
height: 500px;
overflow-y: scroll;
}
I have site that I'm laying out. It's basically Header, Content and Footer all 100% width.
I want to have the background image fill the screen in the content section. I achieved this with the CSS3 background-size:cover. The only problem when Im scaling up to a screen that is 2560px the image gets cut off. Is there a way to work around this so that doesn't happen?
My CSS
#maincontentcontainer {
width: 100%;
background-image: url(../images/sandpiperBG.jpg);
background-position:center center;
background-repeat:no-repeat;
-moz-background-size:cover;
-webkit-background-size:cover;
background-size:cover;
}
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
Will fix it, but the images will become stretched/squashed because you have a fixed height but a variable width.
In order to get background image as full, try this instead:
background-size: contain;
In my page have 2-3 sections that have 100% width and background. When I open it on full screen everything is ok but when the screen is smaller than 960px (width of content in this sections) background image is not the entire page. The right side whis is hidden in firtst moment haven't background - it's white. You can see what I mean here: http://micobg.net/10th/
Simply add the background-size:100% style to the element where you applied background-image. Works in Firefox, Safari, and Opera. For example:
<style>
.divWithBgImage {
width: 100%;
height: 600px;
background-image: url(image.jpg);
background-repeat: no-repeat;
background-size: 100%; //propotional resize
/*
background-size: 100% 100%; //stretch resize
*/
}
</style>
<div class="divWithBgImage">
some contents
</div>
Regarding to this article, you should to use cover as well:
html {
background: url(PATH_TO_IMAGE) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Use background min-width:960px; instead of width:100%;
Cheers