I need some help with displaying my background on mobile devices, the current code works on my browser but when I visit it on a mobile device the background crawls up to the top and is not visible, also the div for the other image does not react to the % i gave it. (I really have to use percents becouse it will make the site better for any mobile device)
I had this code working, but it was not in CSS but made in HTML itself, now i want to use CSS becouse you can not download the background anymore as picture.
<!DOCTYPE html>
<html>
<head>
<link rel="favicon" type="image/ico" href="favicon.ico"/>
<title>Rolling Barrel :: Sport & Game</title>
<meta name="description" content="De Rolling Barrel is een revolutionair idee waarmee sporten & gamen een compleet nieuwe dimensie krijgt.">
<style>
body#background {
background: url('background.jpg') no-repeat center center fixed;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-color: #e0e0e0;
background-size: 100% 100%;
}
div {
position: absolute;
top: 20%;
left: 11%;
width: 37%;
height: 70%;
overflow-y: scroll;
overflow-x: hidden;
}
div img {
width: 100%;
}
</style>
</head>
<body id="background">
<div>
<img src="text.png" alt=""/>
</div>
</body>
</html>
I used my Android phone to view the site btw.
Hope someone can help me or give me a push in the right direction.
Thank you very much!!
Either just put the background-image attribute on #background or just put it on body (in the css) no need for both. I understand you may want to contain the image, in which case you can just use the element name (#background) and set an overflow to none if the image bleeds.
If you have any more questions or need help with this, just comment and I'll set up a JS Fiddle for you.
Related
I know there are various similar threads on this but none answer my question. Please look at this most simple HTML code.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
margin: 0;
height: 100%;
background: linear-gradient(to top, blue, white);
background-attachment: fixed;
}
</style>
</head>
<body>
</body>
</html>
Viewed in Chrome for PC (either in normal view or in mobile simulator view) it produces a gradient background that covers the whole screen. Viewed in Firefox mobile for Android or Chrome mobile, the website has a white space at the bottom the size of the address-bar. It either appears right away or it appears when you attempt to scroll the page. Why is it there and how do I get rid of it?
i had the same Problem till hours before.
Set body-height not 100vh, but 100%.
body,html{ padding: 0; margin: 0; height: 100%; } (No background input here!)
In your html document you have to put in a new image-Tag('<'img id="image"'>')
At the end in CSS:
#image{ height: 100vh; background-image: url(..); z-index:-1; background-size: cover; }
So i found out, that 100% is smaller than 100vh actually, what actually kills the white bar at the bottom on android browser while scrolling out the navibar.
Sorry for my broken english. Greetings from germany. xD
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%;
}
On my website (www.wetter-goch.de) I'm showing current weather information. for mobile device i added the overflow-y css attribute to the div-container.
This is working like charm on iOS' Safari, but on Android the site does not allow to scroll through the content. additionally my background image is not scaled to the viewport-size of the mobile-device.
I'm creating the background by the following css
<style>
html {
background: url(<?= DataSource::getCurrentTimeLapsePath() ?>) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
HTML-Viewport Meta-Tag
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
Sidebar-CSS of the hole website...
.leftsidebar {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
z-index:-1;
width: 280px;
height: 100%;
padding: 10px;
background-color: rgba(255,255,255,0.7);
overflow-y: auto;
}
Related media queries
#media only screen
and (min-device-width : 320px)
and (max-device-width : 1000px) {
.leftsidebar {
width: 100%;
}
.rightsidebar {
display: none;
}
.radar {
display: none;
}
.statistics {
display: none;
}
}
Hope anybody could help me solving this.
In order to use the media type that's specified you need to query the page to determine the style sheet to load. You'll need to added a media attribute to the style sheet that is for mobile "handheld". It'll then load the correct sheet on Android.
<head>
<link rel="stylesheet"type="text/css" href="theme.css">
<link rel="stylesheet"type="text/css" href="print.css"media="handheld">
</head>
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;
}
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)