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">
Related
This issue is specific to Chrome running under Android (possibly iOS, I didn't test).
I'm trying to get a simple gradient to cover the entire page height and remain fixed while other page elements are scrolling.
Everything works well until chrome for Android auto-hides the URL bar at the top as you scroll down.
At that point, a portion of the background, equivalent to the URL bar's height turns white at the bottom of the page.
Any ideas on how to avoid this issue and maintain my gradient across the entire page?
Pseudo HTML:
<html><head></head>
<body class="menu_body">
[Some scrollable content]
</body></html>
CSS:
.menu_body {
color : #fff;
background : linear-gradient( 130deg, rgb(44,49,65) 0%, rgb(94,67,70) 100%);
height : 100%;
margin : 0px;
padding : 0px;
background-repeat: no-repeat;
background-attachment: fixed;
}
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 have a website that i'm trying to design. I've filled the background with an image that takes 100% of the height of the screen. On a computer this works perfectly, but on mobile it only takes 100% of the webpage space available at load, which includes the browswer's URL bar at the top. When you scroll down, the URL bar disappears that leaves a gap at the bottom of the background of website.
The website is a single webpage website. The 'homepage'/initial view on load fades in to the background image. I want the actual content to be just off the screen on load, and so having a background image that just fills 100% of the height of the screen is important.
How do i fix this?
Below is how i've filled the background and screenshots of the website in question.
I've filled the background of the website using the following CSS code.
html{
background: url(../content/BackgroundAndHand03.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
opacity: 1;
}
Website with mobile browser URL bar
Website without mobile browser URL bar
This prevents scrolling past the html element and allows your body to maintain its position during over-scroll on mobile devices, so even if the device supports over-scroll, the html is locked to the desired color or image while the body moves.
html {
overflow: hidden;
height: 100%;
}
body {
height: 100%;
overflow: auto;
}
Make sure to include this meta tag if you already haven't
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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.