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.
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'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%;
}
I'm developing a web based app. I load a page on an android WebView.
The issue is, I set a wave border effect to a div using css3 radial gradient, the page shows correctly on most browsers, and works fine for iOS version app as well. But on the android app, If I add this style, the page will totally become blurred. I paste my css code here:
wave-l:before{
display: block;
position: absolute;
content: '';
top: 0px;
left: -4px;
height: 100%;
width: 4px;
background-position: 0px 0px;
background-size: 4px 8px;
background-image: -webkit-radial-gradient(100% 4px, circle, $color 4px, transparent 4px);
background-image: -moz-radial-gradient(100% 4px, circle, $color 4px, transparent 4px);
background-image: radial-gradient(circle at 100% 4px, $color 4px, transparent 4px);
}
This css will generate a left wave style border. The blurred pages shown on android WebView is as shown below:
I'm quite sure it's this css code snippet caused the issue. So anybody know the solution?
Add the code
android:hardwareAccelerated="false"
in the AndroidManifest.xml webview used activity.
It is too late to respond, but I was also getting the blurred issue in webView. I resolved it by adding
webView.getSettings().setJavaScriptEnabled(true);
It may help somebody
I'm trying to fit a background image to it's container using background-size:cover.
here is my fiddle : The Fiddle
it works in all browsers but not working in Android native browser..
anybody has any solution please ? thanks
After searching about this problem and finding no solution, I deleted background-image from CSS file styles and used an inline style in HTML codes. The problem with android native browser is solved.
I updated the fiddle and it's working in android native browser.
The Updated Fiddle
it seems that android also has problem with parsing background format like this :
background: url('...') fixed center center / cover;
and we should separate the background-image form others and use it inline, and then use each option separately in css file, like this :
background-size: cover;
background-position: center center;
Unfortunately, the background-size property isn't fully supported by older versions of Android's native browser and Chrome for Android. I went through the pain of discovering this the hard way. Instead of using "cover" as a value, do the following:
background-size: 100% auto;
What this does is give you the same horizontal feel as "cover" and then automatically sets the height of the image, assuming that the image has intrinsic dimensions.
For further reading, I recommend diving into the detailed writeup from Sara Soueidan.
I had the same problem with background-size: cover, the image was fit to the width of the device and below there was white background, and it was fixed when I set background-color using this css:
background-color: #fff;
or shorthand:
background: #fff url('http://cdn.stupiddope.com/wp-content/uploads/2013/06/IMGP3540.jpg') no-repeat scroll center center / cover;
it doesn't matter which color you pick because it will be invisible.
JSFIDDLE
I have an android app that has has this css for the body background:
html, body {
height:100%
margin: 0;
padding: 0;
color: white;
position: static;
text-align:left;
background: URL(images/aVia_Background_new.png) top center black;
background-repeat:no-repeat;
background-size: cover;
background-attachment:fixed !important;
}
When the page is long enough to be scrolled, the background will scroll right off the screen as the page is traversed downward. It acts as though the background-attachment property is set to scroll, but it certainly isn't. The background works properly when the website is viewed in Google Chrome on my desktop, but for some reason when it's translated to Android via Phonegap, it doesn't work properly. Is this a known issue with Phonegap? And does anyone know anything I could try to remedy this? Thanks to any responses. The more ideas the better.
yes.. the problem is with your `background-attachment:fixed;
As far as I know position:fixed is not working fine. I had the same issue while I was trying to do a fixed header/footer in my app. And used iScroll at last