I've configured a full screen background image with CSS like this:
html {
background: url(image url) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
overflow: hidden;
}
When I first open the site in a mobile browser it looks great. However, if I select a form input and the mobile keyboard pops open then the background image resizes to match the height of the view that's above the keyboard.
Is there any way to keep the height of the background image static when the mobile keyboard opens? CSS only solutions are preferred.
Here's one way to achieve this with CSS variables. First add this to your <head>:
<script>document.documentElement.style.setProperty('--original-viewport-height', window.innerHeight+"px")</script>
Now you can set the min-height of your background element to var(--original-viewport-height).
Here's an example of the code that I'm using:
body {
min-height: 100vh;
position: relative;
}
body::before {
content: "";
position: fixed;
background-image: url(img.png);
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
min-height: var(--original-viewport-height);
left: 0;
top: 0;
will-change: transform;
z-index: -1;
}
(As you can see, in my specific case the background is on the ::before rather than directly on the body to solve the jittery scrolling issue with fixed backgrounds in Android Chrome.)
Related
I'm trying to find a solution to the problem I'm having with fixed backgrounds on iOS devices. I would rather not have to redesign everything for this website, and I'm hoping that some CSS changes can fix it. This is what the site looks like on iPhones, and this is what it should look like. The CSS code I'm using is as follows:
.container {
min-width: 320px;
max-width: 480px;
margin: 0 auto;
}
.fixed-background {
height: 800px;
-webkit-backgound-size: cover;
-o-backgound-size: cover;
-moz-backgound-size: cover;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
text-align: center;
overflow: auto;
}
I've also tried using a #media query to fix it for iOS using some posts on stackoverflow, but this didn't seem to have any effect:
#media screen and (min-color-index:0) and (-webkit-min-device-pixel-ratio:0) {
.fixed-background {
background-attachment: scroll;
}
}
HTML
<div class="fixed-background bg-1">
<div class="container">
<div class="title">
<h1>ROOK PROPERTY<br>MANAGEMENT INC.</h1>
<h2>CONDOMINIUM MANAGEMENT</h2>
</div>
</div>
</div>
I just went through the same issue, and this is how I solved it.
First, you need to declare your body and html to be 100% wide and 100% tall:
html, body{
width: 100%;
height: 100%;
}
Then, the scrolling on your page can NOT be done by the body: you must wrap it on a container. This container needs three parameters: overflow:scroll, width: 100% and height: 100%. I recommend wrapping the entire site in it:
#wrapper{
width: 100%;
height: 100%;
overflow: scroll;
}
If you don't like how it scrolls, you can also try adding
-webkit-overflow-scrolling: touch.
Hope that helps you/whoever comes looking for this!
I am not sure if this will help
I found a general solution for Background Position Fixed on iOS.
And it works really well with recent iPads.
Feel free to copy!
Just beneath the body tag add a
<div id="iPad"></div>
Then style that as:
div#iPad {
position: sticky;
background: <your image + settings>;
top: 0;
margin: 0;
height: 100vh;
margin-top: -100vh;
z-index: -1 }
I put it on all pages of my site.
But you can see it in action on this really long music page.
It works!!
Took me a while to come up with this.
Note you can only see this on iOS tablet.
I didn't implement it for mobiles.
But possible the code would work just as well.
To all my div with fixed background I add the classes class="parallax iparaxify paraxify"
And in my main css file I have:
.parallax {
width: 100%;
background url(../images/bg.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
And finally make it parallax for everything except i products
.paraxify {
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
At the end deactivate position:fixed for ipad, iphone and ipod with jquery
// adds mobile class, and mobile os to html tag
jQuery(document).ready(function($){
var deviceAgent = navigator.userAgent.toLowerCase();
if (deviceAgent.match(/(iphone|ipod|ipad)/)) {
$('.iparaxify').removeClass('paraxify');
}
});
I have a script in CSS. I have no problem with this script on computers with big resolutions. But users that have a screen resolution like 1024 x 768 or smaller have problems with the html page. The script shows like 50% of the page and the user cant scroll to see the other 50% of the page.
How can I fix this
This is my code in CSS:
#contact2 {
padding-top: 0px;
padding-bottom: 0px;
background-color: black;
background :url(../images/contact-bg.jpg);
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#contact-us2 {
padding-bottom: 90px;
}
I have tried to add a overflow: scroll; element but this shows only the scroll bar. Scrolling is still disabled.
you should define a specific style section at the end of your css file, like the following
#media only screen and (max-width: 1024px) {
/* put here specific css for mobile */
#contact2 {
position: relative
overflow:auto;
}
#contact-us2 {
}
}
I have tried to add a overflow: scroll; element but this shows only the scroll bar
That happens because the content can fit inside the "contact2" div and there is no need for scrolling.
The second problem is that you haven't set a max-height and max-width property for your div. What 'min-height' does is that it defines the height the div should have, even when there are no contents in it. But it doesn't stop the div from resizing if the content can't fit inside the div, and that is the reason why your overflow: scroll isn't working.
The best solution would be to remove 'min-height' and 'min-width' from your code and just type this width and height:
#contact2 {
padding-top: 0px;
padding-bottom: 0px;
background-color: black;
background :url(../images/contact-bg.jpg);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#contact-us2 {
padding-bottom: 90px;
}
If you don't want to show the scrollbars when your content can fit inside the div and there is no need for scrolling you can use media queries.
https://www.w3.org/TR/css3-mediaqueries/
I hope this helps you. Feel free to comment below and I'll see what I can do.
Link to the site is
I have an image with size cover as soon as you enter the page. In order to make it available in every browser (I was having troubles with Opera mini and Android browser) I added this code to the div element:
.portada{
width: 100%;
height: 100%;
position: fixed;
padding: 20px 10px 60px 10px;
height: 100vh;
top: 0;
left: 0;
z-index: 0;
background: url(../img/nike.jpg) no-repeat center center;
/* background-attachment: fixed; removed for Android */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
}
However, now, because of the position: fixed; when I keep adding content into my page, bellow that section, it displays under the picture and I can´t see it. It is destroying my page. And as soon as I take out the position: fixed; code, it goes back to not displaying the image full screen in Opera and old Android browser.
I want to be able to create more content and scroll down the page.
I have tried with position:relative; but it goes back to not working on Opera mini. It displays the image full width but with minimum height.
Any help? Thanks!
I think I finally found the solution. I added to the .portada class min-height: 300px; and now at least in those browsers the image is a little bit bigger and it does the job. I also took out the width and height properties so the final code of the class is:
.portada{
position: relative;
min-height: 300px;
z-index: -1;
padding: 20px 10px 60px 10px;
height: 100vh;
background: url(../img/nike.jpg) no-repeat center center;
/* background-attachment: fixed; removed for Android */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
}
Looks like it works good in every browser I can test.
This is because you display your image as a background and your div.portdata is empty. Try inserting the image using img html tag.
I'm looking to make my homepage a full screen centered background image, where it doesn't matter what screen size the device is, the image always covers the entire page and with the correct aspect ratio. I'd also like it to work across various devices.
I've seen various different ways to do this but i just don't seem to get the effect that i'm looking for. So i'm either doing things incorrectly or i just haven't found/thought about a solution that works.
Thanks
html {
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;
}
Try the above code and switch html with any other element as required. So if you only want it on the body or something for example.
This was taken from this article on CSS Tricks -
CSS Tricks - Perfect Background Image
.bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
Like that, you can still use the html image tag.
.div {
background: url('images/bg.jpg');
background-size: cover;
background-position: center;
}
And for responsive layout if you are new to this i suggest using Bootstrap framework.
I want to create an overlay that I will use behind a popup. But when the page is scrolled down the overlay is no more there? I can use javascript to get the height of page's content and then can apply same height to overlay but is there any css based solution?
#overlay{
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
background-color:#000;
opacity: .75
}
just change the position attribute to fixed.
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
Try that, i'm not sure if it works on anything but backgrounds but its worth a shot!