I know this problem is common and plenty of users have asked there for a solution and of course, I did read answers to these questions but nothing has helped for me.
This is how does the website look like when it is first rendered. All things are working just fine, the image is covering the whole page.
Then I try to scroll down and with an approximately 50% chance this is happening.
The scrollbar is hidden but the ugly white stripe appears at the bottom. When I stop scrolling the image stretches itself to the proper position. But the scrolling experience is ruined because of that white stripe.
Any helping hands for this?
<div className="flex" style={{height: height, minHeight: "576px" }}>
....
</div>
html {
background: url(./bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
Updated Suggestion:
Please check this second attempt:
https://codepen.io/panchroma/pen/NWXVvbL
(or a preview link that will eventually expire:
https://cdpn.io/pen/debug/NWXVvbL?authentication_hash=wQMPobNYVpdk )
the change is how the background image is added:
body:before {
content: "";
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -10;
background: url(./bg.jpg)
no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The credit for this second suggestion belongs to Vincent
background: fixed no repeat not working on mobile
Please note that my original solution below isn't a good solution because of how mobile devices handle fixed background images.
===========
How does this look for you?
https://codepen.io/panchroma/pen/RwxmVPY
It's forcing the HTML element to be 100vh. For illustration, I removed the styling on your .flex class, it's not needed to solve your image background question.
And I also added a viewport meta tag to the head of the page
<meta name="viewport" content="width=device-width, initial-scale=1">
HTML
<div class="flex">
...
</div>
CSS
html {
background: url(./bg.jpg) no-repeat center center fixed;
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh; /* NEW */
}
/* .flex styling removed */
/* .flex{
height: height, minHeight: "576px";
} */
I wanted to give my web page background on which all elements will be so I added this to my CSS file:
body {
background: url("../img/pic.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
And it works as expected on web browsers. The background image is fixed in position and while scrolling, only the elements in body tag moves but not the picture.
BUT that doesn't work for mobile phones...When I open it on my mobile phone that same background picture is shown but zoomed like few times, it won't resize nicely as it looks like when I shrink my web browser on my PC to see a preview on smaller screens.
I tried few pictures, bigger, smaller, different ratios, but nothing helped. I even added
#media screen and (max-width: 479px) {
body {
background: url("../img/pic.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}}
so I could have a special picture to be shown on mobile devices but no matter which picture I select/upload it always distorts it with that zoom.
I am using bootstrap and still learning. I have some stock files from some templates which I used but searching through them hoping to find somebody CSS which overwrites my own body CSS and zooms on the image but couldn't find any. heh
On phone fixed background work bad on lot of OS.
So try this :
background-attachment: initial;
Or use body:before to set the background.
More solutions here :
background: fixed no repeat not working on mobile
Try this solution:
#media(max-width: 767px) {
body {
background-size: 100%;
background-attachment: initial;
background-position: center;
background-repeat: no-repeat;
}
}
Your problem is propably in declaration of #media tag. It should be #media(max-width: 767px).
Trying to fix the issue with the background image for my title div to make it fully responsive.
Issue is: the size of the background image blows up on iPad Pro in landscape.
It works correctly on desktops, also shows up correctly in Chrome Dev tools for responsive/iPad Pro landscape. The only instance I currently observe this issue is - iPad Pro landscape (both Safari and Chrome).
See code and screenshots attached.
Website: rita.im
Size of title.jpg file is 2464 × 1632
CSS for the Div
`.bgimage {
position: relative;
background-image: url(../img/title.jpg);
background-repeat: no-repeat;
background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-position: top center;
width: 100%;
height:100vh;
bottom: 0;
overflow: hidden;
background-attachment: fixed;
background-color: #fff;
margin: 0;
padding: 0;
}`
Chrome Dev tools preview
Actual iPad Pro landscape display
Thank you! Will post answer if I resolve the issue myself first.
background-attachment: fixed;
, which was there for "parallax" effect seems to have been the problem. Without it, background images display at correct scale. Will have to find a way to add parallax for banner on iOS with JavaScript.
I'm creating a form on my page with bootstrap css.
I use an image as background which covers the entire background.
bootstrap seems to add a semi-tranparency to the top of my page, which disappears when scrolling the page: http://www.landoflove.be/medewerkers.php and I can't seem to find out why it's doing that. It does the same thing on the main page landoflove.be .Why is this happening and how can I disable it?
Your html code is invalid. There's no doctype and you have unclosed div somewhere. Fix this first, then add:
html, body {padding:0; margin:0}
Check this CSS in your landoflove.css file
body, html {
height: 100%;
background: url(../img/bgoff-min.png) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: baloo paaji, sans-serif;
}
The problem is here
background: url(../img/bgoff-min.png) no-repeat center fixed;
Your image is having the size of 1227 X 1159 pixels. and you have added no-repeat center fixed
if you remove that you will have the background to be stretched something like this
Also, you need to modify the HTML
Seems that you are using only one
<div class="row"></div>
and all your form elements are inside this which is not a right approach.So suggesting you to have one form-group in one row
the mark-up was indeed invalid for some tags because is was a work in progress.
I seem to have found what my particular problem was:
body, html {
height: 100%;
background: url(../img/bgoff-min.png) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: baloo paaji, sans-serif;
}
The height: 100% caused the problem. Now the transparent layer is indeed gone, but i still have no clue why it added such tranparency in the first place.
I'm just starting on a website and I already encounter a small problem where I can't find a specific solution to.
I wanted to make my website background fit any screen size in width, height does not matter.
This is the link to my image:
../IMAGES/background.jpg
EDIT
I have no idea what's wrong, but for some reason the body doesn't even want to get the background image. It just displays a plain white background.
body
{background-image:url(../IMAGES/background.jpg);}
you can do this with this plugin http://dev.andreaseberhard.de/jquery/superbgimage/
or
background-image:url(../IMAGES/background.jpg);
background-repeat:no-repeat;
background-size:cover;
with no need the prefixes of browsers. it's all ready suporterd in both of browers
Try this ,
background: url(../IMAGES/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
For more information , follow this Perfect Full Page Background Image !!
You can try with
.appBackground {
position: relative;
background-image: url(".../img/background.jpg");
background-repeat:no-repeat;
background-size:100% 100vh;
}
works for me :)
Try this, I hope it will help:
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-image: url('background.jpg');
body{
background-image: url(".../img/background.jpg");
background-size: 100vw 100vh;
background-repeat: no-repeat;
}
Try this:
background: url(../IMAGES/background.jpg) no-repeat;
background-size: auto auto;
.. I found the above solutions didn't work for me (on current versions of firefox and safari at least).
In my case I'm actually trying to do it with an img tag, not background-image, though it should also work for background-image if you use z-height:
<img src='$url' style='position:absolute; top,left:0px; width,max-height:100%; border:0;' >
This scales the image to be 'fullscreen' (probably breaking the aspect ratio) which was what I wanted to do but had a hard-time finding.
It may also work for background-image though I gave up on trying that kind of solution after cover/contain didn't work for me.
I found contain behaviour didn't seem to match the documentation I could find anywhere - I understood the documentation to say contain should make the largest dimension get contained within the screen (maintained aspect). I found contain always made my image tiny (original image was large).
Contain was with some hacks closer to what I wanted than cover, which seems to be that the aspect is maintained but image is scaled to make the smallest-dimension match the screen - i.e. always make the image as big as it can until one of the dimensions would go offscreen...
I tried a bunch of different things, starting over included, but found height was essentially always ignored and would overflow. (I've been trying to scale a non-widescreen image to be fullscreen on both, broken-aspect is ok for me). Basically, the above is what worked for me, hope it helps someone.
This worked for me:
body {
background-image:url(../IMAGES/background.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
Try this,
.appBg {
background-image: url(".../img/background.jpg");
background-repeat:no-repeat;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto ;
}
This one works for me
Background image fix to screens with browser compatibility css
.full-screen {
height: 100%;
width: 100%;
background-image: url(../images/banner.jpg);
background-size: cover;
background-position: center;
//for browser compatibility
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
}
Although there are answers to this your questions but because I was once a victim of this problem and after few search online i was unable to solve it but my fellow hub mate helped me and i feel i should share.
Examples explained below.
Folders: web-projects/project1/imgs-journey.png
background-image:url(../imgs/journey.png);
background-repeat:no-repeat;
background-size:cover;
My major points is the dots there if you noticed my journey.png is located inside an imgs folder of another folder so you're to add the dot according to the numbers folders where your image is stored. In my case my journey.png image is saved in two folders that's why two dot is used, so i think this may be the problem of background images not showing sometimes in our codes. Thanks.
width: 100%;
background-image: url("images/bluedraw.jpg");
background-size: cover;
You can do it like what I did with my website:
background-repeat: no-repeat;
background-size: cover;
background: url("../image/b21.jpg") no-repeat center center fixed;
background-size: 100% 100%;
height: 100%;
position: absolute;
width: 100%;