Using full width and full height on background images for sections of my site but I'm experiencing some jumpy behavior on Android. I'm using modernizr to detect touchevents and changing the background-attachment from fixed to local. Here is the site and below is the css that I'm using:
.intro, .behind-the-scenes, .the-scene, .the-stage, .contact {
height: 100vh;
min-width: 100%;
color: $white;
display: table;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
// if a touchevent is detected
.touchevents {
.intro, .behind-the-scenes, .the-scene, .the-stage, .contact {
background-attachment: local;
}
}
The problem was caused by these two properties combined with the Chrome for Android browser's behavior:
CSS:
.intro,
.behind-the-scenes,
.the-scene,
.the-stage,
.contact {
height: 100vh;
background-size: cover;
}
As the user scrolls down the browser's top toolbar will disappear, thus the five elements will gain height. Because the background-size is set to cover the image will have to quickly stretch as well.
SOLUTION
I couldn't test it on a mobile device, but adding transition to the height property might solve the issue.
.intro,
.behind-the-scenes,
.the-scene,
.the-stage,
.contact {
-webkit-transition: height 0.2s linear;
transition: height 0.2s linear;
}
If it doesn't help, there's a jQuery solution which would set the height of these elements on page-load and on window resize so the background wouldn't jump every time the top toolbar disappears.
jQuery:
(function($) {
var elements = $('.full-height');
function elementHeightFix() {
var windowHeight = $(window).height();
elements.each(function() {
$(this).css('height', windowHeight);
});
}
$(window).resize(function() {
elementHeightFix();
});
elementHeightFix();
}(jQuery));
For the sake of simplicity I used a single selector, you can store the selectors in an object and iterate through them. Please note that I mainly use CoffeeScript and TypeScript, so my pure jQuery code might be messy.
Related
I am attempting a layout consisting of header, content and footer. The header and footer should always be shown and the content should expand to fill any space remaining. I have implemented this in this jsfiddle; https://jsfiddle.net/SuperMe79/204wd5sv/42/
.app {
display: flex;
height: 100vh;
flex-direction: column;
flex-wrap: nowrap;
background-color: lightyellow;
}
.header {
flex-shrink: 0;
background-color: lightsalmon;
}
.content {
flex-grow: 1;
/* this adds a scrollbar when the content takes up more space than available to display */
overflow: auto;
background-color: lightgreen;
}
.footer {
flex-shrink: 0;
background-color: lightblue;
}
In the jsfiddle you can see a browser overlay obscures the footer at the bottom. I have a similar problem on my phone where the browser navigation controls obscure the footer.
I can scroll down further but that is a bad user experience.
I want the header, footer to always be visible. I can set the height to less than 100vh but this isn't ideally as it's a fudge and the footer is not longer at the bottom of the view on a browser without an overlay such as on my desktop.
Any thoughts on how to resolve this?
This is a similar issue to these questions but I've used a different approach to positioning and they haven't been answered.
Android browser bottom control bar overlays content
Chrome `position:fixed; bottom: 0;` obscured by Android UI
Try height: 100% instead of height: 100vh. You'll probably also need to assign 100% height to every container:
/* full height for every wrapping element and the app itself */
body,
html,
#app,
.app
{
height: 100%;
}
.app {
display: flex;
flex-direction: column;
}
I've got both #app and .app there because your JSFiddle example has both.
Add followings top of the style.css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
Sample is in this link https://codepen.io/LakshithaMadushan/pen/BaoxvNv
I have a page with a few divs (class="full") that I want to be as high as the viewport of the user is. It works on Desktop (Ubuntu, Firefox) but not on mobile (Android, Chrome). My smartphone shows a small white gap at the bottom.
div.full {
min-height: 100vh !important;
}
html,body {
min-height: 100vh !important;
height:100vh;
margin:0px;
padding:0px;
}
body {
position: relative;
background: url(../img/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
When I scroll on the page, this gap increases. It seems like it is the height of my android status bar + the address bar of chrome when I scrolled down and just the height of the status bar when I did not scroll.
I also tried 100% instead of 100vh, it didn't help.
If I remove
height:100vh;
from the html, body block the gap disappears, but then I have a new problem: The background image is scaled up a lot and gets blurred...
How can I make a div exactly 100% high on all devices (even when scrolling)?
I think I got it working now. The code in the question was correct, but I also had this code in my CSS:
.ref-logo {
width: 400px;
}
This seems to have caused my page to be rescaled. I noticed this because the navbar-button was only shown when I scrolled to the right...
This works now:
.ref-logo {
max-width: 400px;
width: 90%;
}
I know why I am no web developer :P
I have a website that requires a 'bottom right' background image alignment, along with a background colour of #000.
My css tests okay on all OS and browsers I've tried so far (chrome, ie, moz, safari) except for chrome on android, which renders the background image outside the browser window.
Other image alignments work fine - the problem seems to be only with bottom right alignment, and only with chrome on android.
Problem page url: Features a background-image: bottom right alignment
CSS as follows:
body {
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 1em;
background: url("../images/bg_prices_XL.jpg");
background-size: contain;
background-color: #000;
background-repeat: no-repeat;
background-position: bottom right;
background-attachment: fixed;
}
If I change alignment to background-image: top right; then the problem goes away.
Page renders properly on android moz. Do I therefore need to include a -webkit specific alignment?
Havd tried adding:
html,body {
height 100%;
width 100%;
}
...but no luck. Viewport size already set to device size, Chrome seemingly is rendering oitside the viewport anyway, below the footer.
Tried styling the background-image under html section of css, but didn't work.
All thoughts welcome.
I have inspected the page throught chrome dev tools. I think if you remove background-attachment: fixed; propery it will work.
...never mind folks. I made the background a fixed, 100% height and width div, with a negative z-index. It feels like a clunky workaround to me, but it seems to work. Any better suggestions though would be appreciated thank you.
I'm trying to set a background image for an spn web app and I need the background to be fixed (that it won't be scrolled with the rest of the page).
this is the body css:
body {
background-color: rgb(51, 102, 102);
background-image: url('../images/background.png');
background-attachment: fixed;
background-position: center;
color: #eee;
}
Safari in IOS and Chrome on Android repeat the background instead of fixing it at one point.
I've seen on the internet it's been disabled on mobile but is there a solution?
background-repeat: no-repeat;
background-position: center center;
There are other options to doing this but this is the only one that actually worked for me; and i tried just about all of them.
You set the div just below the initial tag. Then apply the image to the html within the div. Give the div and id attribute as well (#background_wrap in this case).
...I tried this without applying the actual image link within the html and it never worked properly because you still have to use "background-image:" attribute when applying the image to the background within css. The trick to getting this to work on the mobile device is not using any background image settings. These values were specific for my project but it worked perfectly for my fixed background image to remain centered and responsive for mobile as well as larger computer viewports. Might have to tweak the values a bit for your specific project, but its worth a try! I hope this helps.
<body>
<div id="background_wrap"><img src="~/images/yourimage.png"/></div>
</body>
Then apply these settings in the CSS.
#background_wrap {
margin-left: auto;
margin-right: auto;
}
#background_wrap img {
z-index: -1;
position: fixed;
padding-top: 4.7em;
padding-left: 10%;
width: 90%;
}
Using ionic-2 when a background image is set and it's size (background-size) is set to 'cover' or '100% 100%' such as:
background: url("../../img/bg.jpeg");
background-repeat: no-repeat;
background-size: cover;
When the keyboard is opened the background image is resized, how can this be avoided? (So that the background image size remains the same even though the keyboard has shrunk the content)
Use the correct way to embed a full screen background image:
ion-content {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
After a lot of time searching with no solution I decided to develop one using angular-2's ngStyle, and the solution is quite trivial actually:
In the page class, create shouldHeight member:
export class myPage {
shouldHeight = document.body.clientHeight + 'px' ;
constructor(private navCtrl: NavController) {
}
}
Then add this to the ion-content in the said page:
<ion-content padding [style.background-size]="'100% ' + shouldHeight">