My responsive background works well on PC Safari, Chrome, Firefox, Opera. It works as well in Firefox on Android. But in Chrome on Android I'm getting something like this:
Do you have any idea how to fix it? I want it to be fullscreen on Android Chrome too. I've tried everything...
CSS and HTML code:
.background {
background-image: url("images/bgsky2.jpg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="background">
</body>
</html>
This issue was reported meny years ago !
See this link will help :
http://code.google.com/p/android/issues/detail?id=3301
And i remember this code helped me :
html{
height:100%;
min-height:100%;
}
body{
min-height:100%;
}
Try this:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Related
I am trying to render an image as html in webview of android but not able to calibrate it correctly in mobile, original image gets cropped both left and right using below code. how should I fix this and how to know if it will render fine on mobile (by running in browser only) ? below is what I am doing.
image dimensions are:(624*936)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap"
/>
</head>
<body style="margin: 0; padding: 0; width: 100%; height: 100%">
<div
onclick="surface.touch()"
style="
background: url(https://image/startBackground_1)
center center fixed;
background-repeat: no-repeat;
height: 100%;
background-size: cover;
display: flex;
justify-content: flex-end;
flex-direction: column;
font-family: 'Noto Sans', sans-serif;
"
>
<div
style="margin-bottom: 100%; margin-top: 100%;"
></div>
</div>
</body>
</html>
I'm trying to show a background image on an Android phonegap app using css. This is the sample HTML
<html>
<head>
<title>Login page</title>
</head>
<body style="margin: 0px; background: url("img/bg_index.jpg";) repeat scroll 50% 0px / cover transparent;">
</body>
</html>
while using this code the background image is not shown in certain android phones such as sony ericsion but in most of the android phones and also in iphone this code is working fine.
So I tried to change style as shown below
<html>
<head>
<title>Login page</title>
</head>
<body style="margin: 0px;background: url("img/bg_index.jpg";) repeat scroll 50% 0px / cover transparent; background-image: url("img/bg_index.jpg";);background-repeat:no-repeat;">
</body>
</html>
After this style applied the app launched as below in the image
How to write a background style that is accepted by all android devices and iphone
Try this:
background: url("../img/bg_index.jpg");
Simply do this:
background: url("your/path/img/bg_index.jpg");
div {
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-size:100% 100%;
}
#first-bg {
background-image: url('http://go.sap.com/_jcr_content/par/hero_a9cf/image.adapt.subtablet.jpg/1426599556769.jpg');
background-size: 100%;
height: 600px;
background-repeat: no-repeat;
}
I have a background image for my website that I have set to be responsive to the size of the browser and stay centered; it works completely when I adjust the size in Chrome. However, the background image does not appear in IE or on my android phone in the Chrome app, or on Safari; basically it only works on Chrome. What should I do to make the background image appear on all devices and browsers while still remaining centered?
CSS:
html {
background-image: url("http://blog-imgs-65-origin.fc2.com/s/n/n/snnantn/20140317230845d64.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: rgb(198, 198, 198);
background-position: center;
}
HMTL head:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title>Website</title>
<link rel="stylesheet" href="app.css" type="text/css" />
</head>
I just try with the your example same as external URL it nicely work for me. actually we can used both external and internal image URL for that. This issue may be issue with the loading time of the image.
And also try to used css vendor prefix as
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
If this also not work there is several css and js methods to complete your task.
I am having some issues with my background only not loaded correctly on the android mobile screen. Works fine on apple. The styling I have used for the background is:
body
{
background: url('images/MobileBack.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can also view the site at: www.bingetech.com
i think it could be because you have not defined a scale within your viewport meta tag.
Try:
<meta name="viewport" content="initial-scale=1.0" />
[edited] with max-scale too
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Another thing i would add is
CSS
html, body {
min-height: 100%;
}
It seems that the background-fixed CSS property doesn't work right in Jelly Bean WebView (both inside an application and using the default Android browser).
If I set this property, the background image gets loaded over the content, i.e. the content is behind the background image.
Here's my relevant HTML code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="target-densitydpi=device-dpi">
<meta name="viewport" content="initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./gesture-background_files/genre-channel-background.css">
<style type="text/css"></style></head>
<body>
<div id="right-keys">
<img src="./gesture-background_files/one.png"><br />
Film24<br />
</div>
<div id="right-keys-vertical">
<img src="./gesture-background_files/one.png"><br />
Film24<br />
</div>
<div id="footer">
MUSCADE<span class="large">EPG</span>
</div>
</body>
</html>
And here's the relevant part of the CSS:
body {
background-image: url(hot-black-background.jpg);
background-color: black;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom left;
}
#right-keys, #right-keys-vertical {
position: absolute;
right: 10px;
width: 100px;
text-align: center;
text-shadow: black 2px 2px 0px;
}
#right-keys img, #right-keys-vertical img {
height: 90px;
margin-bottom: 0;
}
#footer {
position: absolute;
right: 10px;
bottom: 10px;
font-size: 20px;
}
It's a bit long, but the only important part are the background-attachment and background-position properties on top of the CSS file. If I remove those, everything works fine.
Is this a known bug? Can anyone suggest a workaround?
Here's a link to the file so you can try opening it from a Jelly Bean native browser (not Chrome):
http://212.92.197.78/gesture/gesture-background.htm
It turns out that in the Jelly Bean browser if you use
body {
background-image: url(any-image.jpg);
background-attachment: fixed;
background-position: bottom;
}
or anything involving bottom or right for background-position, any elements you position with reference to the right or bottom edge of the screen will be overlaid by the background image.
This is most certainly a bug in Jelly Bean's browser.
Instead of using the above, I put a background image on my page using the following code:
HTML:
<body>
<img id="background" src="any-image.jpg" />
(...)
</body>
CSS:
#background {
z-index: -1;
position: fixed;
bottom: 0;
left: 0;
}
for position related and absolute you can use z-index. Read more about z-index: http://www.w3schools.com/cssref/pr_pos_z-index.asp
On my website, to make the background image to reappear behind the content (on Jelly Bean browser), I only had to remove the css property: background-attachment: fixed.
Zoltan's solution not worked well to me because it makes the background image does not display correctly in some browsers (tested on browserstack)