I'm using a Wordpress responsive theme and would like a fixed background.
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
I have found that the site doesn't display correctly (only background seen, body content flashes up briefly) in Android browser and Dolphin,if I change the background to
background-repeat: repeat;
background-position: top center;
background-attachment: scroll;
and add
html, body {
height: 100%;
}
This allows the body content to be seen but then on Firefox (android) you can't scroll down the page to see all the content. On other browsers the scroll is slow.
Is there a way to use a fixed background that will display ok on all(most) mobile phone browsers ?
Thank you.
Did you try :
html {
height:100%;
}
body {
min-height:100%;
}
Code a litlle short to understand more of what's going next, inside body html structure and it's CSS
Related
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%;
}
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 having issue where the site logo gets cut off in phone but not in desktop. I've tried different things such as using <img/> <a> <div> but same issue.
Here's how it looks in phone: http://saarman.net/storage/123-mob.jpg
Here's how it looks in desktop: http://saarman.net/storage/123-web.jpg
Also notice in mobile the text is less bold than it is in browser. What could be the issue?
Here's the CSS I use inside the <a> where the logo is:
display: block;
width: 300px;
height: 80px;
background-image: url("../image/logo-dark.svg");
background-size: 100% 100%;
background-repeat: no-repeat;
text-indent: -99999em;'
Tested with android phone using chrome browser
It seems to me that your DIV is getting out of the screen.
Probably this would work for you:
width: 100%;
max-width: 300px;
Note: You also might need to play with the height. However the following should do the work
height: auto;