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;
}
Related
I am using sticky footer design for my website that I have adopted from Responsive Web Design with HTML5 and CSS3 (second edition) from Ben Frain. It is working perfectly on major modern browsers but not on Samsung Galaxi Note 2 built-in browser. I am wondering why? .Any explanation or advice is welcome, including any feedback from iphone users.
<!doctype html>
<html>
<head>
<meta charset="iso-8859-1">
<title>Sticky footer</title>
</head>
<style type="text/css">
html, body{
margin: 0;
padding:0;
}
html{
height: 100%;
}
body{
display: flex;
flex-direction: column;
min-height: 100%;
}
#header{
background-color: #0FF;
}
#MainContent{
flex: 1;
}
#footer{
background-color: #0F9;
}
</style>
<body>
<div id="header">This is the header</div>
<div id="MainContent">This is the main content</div>
<div id="footer">This is the footer</div>
</body>
</html>
Samsung Galaxi Note 2, in-built browser, does not handle html5 flexbox concept properly even by putting -webkit. Use Chrome or FireFox instead.
As the title says. I can't get the scale3d tranform to work on Android 4.4.2 (webview). Tested on a real device and in an emulator.
However on a S3 Mini with Android 4.2.2 it runs as expected. Also according to the website http://caniuse.com/#feat=transforms3d 3d transforms should work on Android 4.4.2.
Here is some code I used for testing (fiddle link here). The blue box should be four times bigger than the red one:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.yoyo{
position: absolute;
display: inline-block;
width: 20px;
height: 20px;
background-color: red;
}
.yoyo.blue{
background-color: blue;
right: 0;
transform: scale3d(4,4,1);
-webkit-transform: scale3d(4,4,1);
}
</style>
</head>
<body>
<div class="yoyo"></div>
<div class="yoyo blue"></div>
</body>
</html>
Please find below my code of showing responsive image:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xxxxx</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
img {
max-width: 100%;
height: auto;
width:100%;
}
</style>
</head>
<body>
<!--<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top">
<img src="http://www.xxxxx.com/images/Events/xxxxx.png" alt="xxxxx" />
</td>
</tr>
</table>-->
<div>
<img src="http://www.xxxxx.com/images/Events/xxxxx.png" alt="xxxxx" />
</div>
</body>
</html>
Above code for responsive image works fine on iphone but when I open the page on android the image displays with a scrollbar on chrome. On firefox it works fine.
Update
The page works fine on firefox in responsive design view on desktop. It works fine on iphone. But it does not work as responsive as it's expected on android phone. On android phone, it shows scrollbars in browser and in email application as well.
How do I make image responsive so that it works on iphone, android, chrome, firefox and in an email as well ???
I have been fiddling with chrome, firefox and a custom browser on Android and with FF and chrome on a 24" screen on Windows 7 and they all show scrollbars.
Depending on the width and height of your image (actually its ratio: 3:2, 4:3, 16:9, 16:10 etc.) you will see scrollbars when resizing it on a screen with a different ratio than your image. I am not sure, but it may well be that the internal browser engines of FF and Chrome use the same kind of logic to handle image sizing (hense the same effect on Android's Webview and WebChromeClient views) and iOS does not.
You should ask yourself if it is worth all the trouble getting this issue worked out for you or simply accept it as it is (I'd opt for the last).
Have a look at the code below (download => Github renevanderlende/stackoverflow) It is not only an acceptable solution for your issue, but also adds some easy to understand Responsiveness to your page you can fiddle with!
The images in the code are from amazing Unsplash, a fantastic place to find high-quality public domain photos.
And if you are a beginner like me, a visit to Codrops really is a must. Great clear and free tutorials with awesome, ready to use code!!
Cheers, Rene
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>question-26464777</title>
<style>
div { background-size: cover; } /* fully cover a DIV background */
img { width: 100%; } /* Maximize IMG width (height will scale) */
/* Sample media query for responsive design, Resize your browser
to see the effect. DO check http://chrisnager.github.io/ungrid */
#media ( min-width :30em) {
.row { width: 100%; display: table; table-layout: fixed }
.col { display: table-cell }
}
</style>
</head>
<body>
<div class="row">
<div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/1.jpg" alt="image 1"></div>
<div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/2.jpg" alt="image 2"></div>
<div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/4.jpg" alt="image 4"></div>
<div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/5.jpg" alt="image 5"></div>
<div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/6.jpg" alt="image 6"></div>
<div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/8.jpg" alt="image 8"></div>
</div>
<div class="row">
<div class="col"><img src="https://raw.githubusercontent.com/renevanderlende/stackoverflow/master/img/thumbs/4.jpg" alt="image 4"></div>
</div>
</body>
</html>
MAybe you should give a CSS code...
try it:
#media screen.... {
img {
max-width:100%;
}
}
Or you have overflowed any parent element
You have bigger the parent elements I think...
One of parent elements are bigger that phone display...check it
Try...
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
overflow-x:hidden;
}
img, div {
max-width: 100%;
height: auto;
width:100%;
overflow-x:hidden;
}
I'm developing an Android App with Cordova/Phonegap and it works fine! But I've got one problem. On most of the devices my logo at the top looks good and is displayed right:
But on some Android devices is the image deformed:
The Image has the size of 200px x 50px and this size is defined in the HTML img-attribute and in the CSS file, too.
Here is my HTML Code:
<meta name="viewport" content="width=device-width, initial-scale=1">
[...]
<div id="topLogo">
<center><img src="media/images/strikefm-logo-small-top.png" width="200" height="50" /></center>
</div>
Here is my CSS Code:
#topFixed #topLogo {
width:100%;
height:62px;
position:fixed;
top:0;
left:0;
z-index:1;
background-color:#ffffff;
}
#topFixed #topLogo img {
position:relative;
top:9px;
width:200px !important;
height:50px !important;
}
Does anyone knows a solution for this problem?
Thanks!
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)