When I scroll on my website there is a white bar at the bottom of my background image. The image is attached to body:before {}. I have tried a variation of CSS settings and tricks to circumvent this but I can't seem to get around it. I even tried having the image overflow 110vh to prevent the white-space but that also failed.
Example of the issue below. Perhaps this is strictly iOS related? I am using iOS 10 and I have tried both Chrome and Safari and the issue persists on both.
Here is my website:
Here is my CSS:
body:before {
content: "";
display: block;
position: fixed;
left: 0;
top: 0;
min-width: 100vw;
min-height: 110vh;
z-index: -10;
background: url(../css/images/brotherhoodSmall.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Any suggestions for this one? I've already had to use this crazy body:before workaround because background-attachment:fixed doesn't work well on iOS mobile devices.
Thanks
Related
When the browser is at 100% the back images are great. Even at 50% zoom out they're still okay. but as you continue to zoom out all the way to 25% the background image position collapses or "hides" and I'd like the images' background-position: center top to remain intact no matter minimize or maximize.
I've attached an example:
http://i65.tinypic.com/k1e54z.jpg
You can also visit www.medshopandbeyond.com and zoom out in your browser to see what's happening. [BTW: I am aware of the grammatical errors in the pics :) ]
The only one that gets close enough to what I want is background-size:contain
however the image is no longer full width from screen to screen if setting it to this
#header-image4 {
background-image:url("{{ 'old-friends-555527_19201.jpg' | asset_url }}");
height: 750px;
position: relative;
background-repeat: no-repeat;
background-position: center top;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-bottom: -50px;
background-size: cover;
width: 100%;
margin-top: -10px;
}
<div id="header-image4"></div>
This is because you are using background: cover and a fixed height. As you zoom out your height remains the same but the width increases and background: cover will expand to fill that width which is why you are getting an unusual crop. The same issue can be seen if you pull out the width of the browser window on a large monitor.
Personally, I'd create a different height for the div at different breakpoints e.g.
#media screen and (max-width: 1920px){
#header-image4{height: 1000px}
}
#media screen and (max-width: 2560px){
#header-image4{height: 1500px}
}
i am using stellar.js and also am using background-attachment: fixed. However, that scrolling effect which was produced suddenly stopped working in Google Chrome. Here's a link to the
site.
When i try to preview my website in version 45.0.2454.85 m background attachment wont work to any of my background pictures. However it works in firefox, edge and others. When i tried a version below 45 it also worked just fine.
here's how i typically create my background images
CSS
.intro {
background-image: url(/img/banner-bg.jpg);
background-repeat: no-repeat;
height: 100%;
background-attachment: cover;
background-position: center center;
background-size: contain;
}
HTML
<section class="intro" data-stellar-background-ratio="0.5"> </section>
It seems that to make it work for this version i had to take out the overflow-x:hidden property from:
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
Otherwise my images won't stay fixed at this Chrome Version for a reason i don't know.
Please guide me how to set background image of the web page to full screen.
Also I'd like to this image to show fullscreen for all size monitors and mobile devices..
Right now I have an image with resolution 1920 : 1080 and it only looks good on my 19" monitor with resolution 1440 : 900, but not good on 15.4" laptops and mobile devices.
Please help,
Thanks.
The proper solution to keep the ratio to your image is to set background-size: cover.
If the background-size: cover; doesn't work for you, for example, if the aspect ratio of the image is wrong, then you can try using background-size: auto 100% to ensure that the picture keeps it's aspect ratio as well as being tall enough to fit the screen.
I think it all depends on the resolution of the image and the maximum size you're willing to have it. But you will need to put media queries into your code to ensure there are no gaps when the screen gets too big or too small.
Use background-size:cover; will help you.
Use background-size: cover; for newer browsers:
<div id="bg"></div>
html,body{
height: 100%;
}
#bg{
width: 100%;
height: 100%;
background: url(image-path.jpg) no-repeat;
background-size: cover; /* also include vendor prefixes: you may google */
}
check compatibility using background-size
Better solution for full background image with responsive can be found here
You can tackle this in two ways:
New browsers, Use the CSS:
background-size: cover
Old Browsers, use a fake <img /> for the background.
.bg {z-index: 1; position: absolute; width: 100%; height: 100%;}
The background image property for chrome, mozile and opera browsers
body {
background: url(images/image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I am working in jquery mobile and my background is image.Due to the different mobile screen sizes my images does not coves my full screen.It is possible only if this script works.
document.getElementById("pageone").style.backgroundSize = screen.width+"px" screen.height+"px";
But this is not working
Surely you can CSS for this.
html {
height: 100%;
background: url('../images/bg_cover_web.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Have you tried using a percentage width?
I haven't used jQuery mobile, but I have found that meta tags are important for responsive design: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
i have got a little problem with css on my homepage:
if i visit my page from a android device, and i scroll down,
the background image gets a little bit bigger, and if i
scroll up, it resizes again to the correct size.
I think the problem is: i load the pages with jquery's load()
into a div. Then the page size changes, but css still uses the
old size (at dynamic values (100% and cover).)
css:
body {
background: #000000 url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
max-height: 100%;
max-width: 100%;
overflow-y: scroll;
}
If you don't know what i mean: https://www.youtube.com/watch?v=I_ukAfoiqBo look at the background image
What i tried: i have no idea why this is happening (only on android devices) so till now i tried nothing :/
Xorg