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'm running into a strange issue where declaring the background-size to be a certain px value makes my background disappear entirely on mobile (Specifically on the pixel 2 xl, have tried it on a pixel 2 and it works).
Below is the code I am using to declare my background
body:before {
content: "";
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -10;
background: url(photos/2452.jpg) repeat center center;
background-size: 550px 350px;
-webkit-background-size: 550px 350px;;
-moz-background-size: 550px 350px;;
-o-background-size: 550px 350px;;
background-size: 550px 350px;;
}
If I switch background-size to cover it correctly works, however, I want the background to be repeated so having one picture cover the entire page does not really work here.
I ended up downscaling the picture to 550 x 350, not the optimal solution but it worked for me
My header image on my website (dorinart.com) is perfectly positioned in all browsers including android mobile browsers but when I open it on IOS (iphone, ipad) it only shows the top right corner of the image (you can check if you open dorinart.com). How could I resolve this issue?
my css looks like this:
.header{
background: url('../img/banner5.jpg');
background-repeat: no-repeat;
position: fixed;
background-size: cover;
min-height: 730px;
position: relative;
}
Can you try this CSS? I think you want to center the image in the space available right? Please let me know if this works:
.header{
background-image: url('../img/banner5.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position-x: center;
min-height: 760px;
position: relative;
}
If you don't want it centered, then just remove the background-position-x property.
Hope this helps. Thanks.
Update: Attached screenshot from simulator:
I have had a similar issue recently and realised that it's due to background-size:cover with background-attachment:fixed.
In your website its like this:
background: url('../img/banner5.jpg') no-repeat fixed;
background-size: cover;
min-height: 760px;
position: relative;
Here the background-attachment:fixed is the problem.
I solved the issue by using a media query for iPhone and setting background-attachment property to scroll.
So what you can do is use this:
.header{
background-size: cover;
background-attachment: fixed;
#media (max-width: #iphone-screen) {
background-attachment: scroll;
}
}
I've spent the morning doing research on the following issue. I'm making a one page site, using a lot of images. I'm aware that Safari is known for its weird handling of background-attachment:fixed, but that's working fine; my problem is background-size:cover is not working in conjunction with fixed.
I have 5 pages, all of which have a height or min-height of 100%. The last page is fixed like this:
#div5 {
height:100%;
width:100%;
position: relative;
background-image: url("img/background.jpg");
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
On iOS (in both Chrome and Safari) the background image is scaled to cover the full webpage, so it's really stretched.
At the same time, page 4 has the following css:
#div4 {
min-height:100%;
width:100%;
background:url(img/portfoliobg.jpg);
overflow: auto;
background-size: cover;
}
and this works like a charm.
So, something makes the browser behave really weirdly when combining fixed and cover. Does anyone have a solution to this?
Use another div with position:fixed to make the background fixed.
Like this:
http://codepen.io/anon/pen/OVebNg
JADE
.fixed
.bgcover
SCSS
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
.bgcover {
background-image: url('http://globe-views.com/dcim/dreams/winter/winter-04.jpg');
background-size: cover;
width: 100%;
height: 100%;
}
}
Hope this help.
Short answer: you can’t (for now).
You can play with #media screen and (max-width: 1024px) {} but for now iPad Pro have resolution more then ordinary monitors.
I offer you to disable fixed attachment for mobiles via this way:
Main CSS file:
.parallax {
background-attachment: fixed;
background-size: cover;
}
Main HTML
<script type="text/javascript">
if (navigator.userAgent.match(/(iPad|iPhone|iPod|Android|Silk)/gi)) {
document.write("<link rel=\"stylesheet\" href=\"fixparallax.css\" />");
}
</script>
Additional fixparallax.css
.parallax {
background-attachment: scroll !important;
}
I'm trying to get a background image of a HTML element (body, div, etc.) to stretch its entire width and height.
Not having much luck. Is it even possible or do I have to do it some other way besides it being a background image?
My current css is:
body {
background-position: left top;
background-image: url(_images/home.jpg);
background-repeat: no-repeat;
}
Edit: I'm not keen on maintaining the CSS in Gabriel's suggestion so I'm changing the layout of the page instead. But that seems like the best answer so I'm marking it as such.
<style>
{ margin: 0; padding: 0; }
html {
background: url('images/yourimage.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
Use the background-size property: http://www.w3.org/TR/css3-background/#the-background-size
In short you can try this....
<div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" >
Where I have used few css and js...
<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>
And it is working fine for me.
Not sure that stretching a background image is possible. If you find that it's not possible, or not reliable in all of your target browsers, you could try using a stretched img tag with z-index set lower, and position set to absolute so that other content appears on top of it.
Let us know what you end up doing.
Edit: What I suggested is basically what's in gabriel's link. So try that :)
To expand on #PhiLho answer, you can center a very large image (or any size image) on a page with:
{
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center;
}
Or you could use a smaller image with a background color that matches the background of the image (if it is a solid color). This may or may not suit your purposes.
{
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center;
}
If you need to stretch your background image while resizing the screen and you don't need compatibility with older browser versions this will do the work:
body {
background-image: url('../images/image.jpg');
background-repeat: no-repeat;
background-size: cover;
}
If you have a large landscape image, this example here resizes the background in portrait mode, so that it displays on top, leaving blank on the bottom:
html, body {
margin: 0;
padding: 0;
min-height: 100%;
}
body {
background-image: url('myimage.jpg');
background-position-x: center;
background-position-y: bottom;
background-repeat: no-repeat;
background-attachment: scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media screen and (orientation:portrait) {
body {
background-position-y: top;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
}
The following code I use mostly for achieving the asked effect:
body {
background-image: url('../images/bg.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
It works for me
.page-bg {
background: url("res://background");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
You cannot in pure CSS. Having an image covering the whole page behind all other components is probably your best bet (looks like that's the solution given above). Anyway, chances are it will look awful anyway. I would try either an image big enough to cover most screen resolutions (say up to 1600x1200, above it is scarcer), to limit the width of the page, or just to use an image that tile.
image{
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: 0 3em 0 3em;
margin: -1.5em -0.5em -0.5em -1em;
width: absolute;
max-width: 100%;
Simply make a div to be the direct child of body (with the class name bg for example), encompassing all other elements in the body, and add this to the CSS file:
.bg {
background-image: url('_images/home.jpg');//Put your appropriate image URL here
background-size: 100% 100%; //You need to put 100% twice here to stretch width and height
}
Refer to this link: https://www.w3schools.com/css/css_rwd_images.asp
Scroll down to the part that says:
If the background-size property is set to "100% 100%", the background image will stretch to cover the entire content area
There it shows the 'img_flowers.jpg' stretching to the size of the screen or browser regardless of how you resize it.