Content scroll over background image - iOS and android - android

I am using a full page image background on a bootstrap template which allows text to scroll over the background when viewed on a desktop.
.background_html {
background: url(http://*******.com/web/4.jpg) no-repeat top center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I have used a media query to load a smaller size image for mobile devices:
#media (max-width: 600px) {
.custom_bg_5 {
background: url(http://******.com/web/4_sm.jpg) no-repeat top center fixed;
-webkit-background-size: auto auto;
-moz-background-size: auto auto;
-o-background-size: auto auto;
background-size: auto auto;
}
}
This resizes the image correctly but the image doesn't remain fixed and just scrolls with the text. This leaves a blank space beneath the image as I scroll down (ie when the bottom of the image has been reached).
I want the text to just scroll over a fixed background image on mobile devices.
Is there a fix for this yet?

Related

White space at the bottom of the page on tablet/phone

I use a image as page background, this is the code:
body {
background-color: black;
background: url(/images/bg.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 100% 0%;
}
It looks okay on computer but if I open the page from a tablet or phone there is white space at the bottom of the page.
Here is how it should look:
And here is how it looks on tablet:

try,
html, body{
height: 100%;
}

Due to different aspect ratios of the image itself and tablets (many of them), you will always get some blank space when you use cover. Using height 100% will actually cover the entire height, but will stretch the image.
What you may need is to compare the aspect ratios of the image and the screen of the device and then try to use background-size (percentages) to zoom in or out of the image in order to cover everything in all devices.

Background img doesn`t display in all Android broswers

Using all browsers on Computer (chrome, safari, opera, edge) the background image in footer is displayed fine. But using browsers in ANDROID the background image does NOT displayed. In the other hand, using an iPhone (safari, chrome) my image in footer is displayed!!! The only bug/problem there is on Android`s browsers.
<footer class="footer" style="background-image: url('img/creative/backgrounds/lll.jpg')">
//Css Code
footer.footer {
color: white;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
padding: 255px 0 20px;
}

how to set background image for complete screen in phone gap android?

in android version of phone gap background image is not fully covering the screen though having high resolution image
body {
background-image: url("../www/img/tracker_bg.jpg");
background-size: cover;
background-repeat: no-repeat;
}
though using attachmend fixed and changed ever style to set background but for some screen it is not covering full screen as back ground

You can try this CSS3 Code:
body{
background: url(img/tracker_bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Help From here

Background image not responsive when viewed on mobile or iPad

I am having an issue with the background image for my site.
When re-sizing in the browser (chrome) it responds how it should, however when I upload it to my server and open the site from my mobile device, it does not re-size. The image just stays the original size and is zoomed into one area of the image.
Can anyone help please?
Here is the code:
html{
background: url(../img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: 50% 50%;
background-color: #FFF;
}

for small devices use following property
html{background-size: 100% auto;}

White space is coming while switching from portrait to landscape in android mobile

I am trying with html 5 and css 3 for creating mobile application where i tried with 1px strip image repeat. I tested in mobile native browser.While i change from portrait to landscape i found background flicker with a white background.
I also tried CSS3 background gradient, it seems to be not render fully till the html page ends, this is the style i used in my css style sheet
body{
background-image: url('../images/bg_strip.png');
background-repeat: repeat;
height: 100%;
overflow:none;
}

i am not sure but i am trying tos give you a good answer hope it will work fine to you.
background: url(images/bg_strip.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Categories

Resources