I have a bug, I have a onepage website with a intro div with content and a background picture.
Everything works fine, only not on the iphone.
The picture on iphone is fully zoomed in, but on android it works fine.
This is the css code for the intro div:
#intro{
background: url('../images/index_pic.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
width:100%;
height:100%;
z-index: 1;
}
I take it from this site: http://css-tricks.com/perfect-full-page-background-image/
How can I solve this?
This css code doesn't work for iPhone.
When you want full backgrounds you must use this Jquery library -> http://srobbin.com/jquery-plugins/backstretch/
Related
I have an HTML/CSS webpage with a background image. The image is fixed on desktop and looks great, and the main text scrolls over it as intended.
On iPhone6, however, it looks horrible: sometimes, two versions of the photo show up; both versions scroll with the image, rather than staying put, and the second one is stretched to the entire length of the page.
I have searched high and low on stack overflow for answers, and none of the answers work: media queries don't appear to work; -webkit doesn't appear to work; nothing seems to work.
It's 2017, so maybe it's time for an updated answer: how to avoid this problem on iPhone6 mobile (and safari and mobile safari in general)?
This is the code I have so far:
body {
background-image: url(rsz_background.jpg);
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
NOTE: here is a live link to the website: www.successfulnewyear.com If you view the site using chrome dev tools for iphone6, or iphone5--it looks as if it scrolls beautifully with the background staying put. However, if you actually visit the site on your iphone5 or iphone6, you will see that the photo enlarges to the entire size of the website, and it scrolls instead of staying fixed.
You can put the background-image in another div just below the body. Make this div position: fixed. Then put the background image on this without any 'fixed' parameter.
<html lang="en">
<head></head>
<body>
<div class="bkgdImage"></div>
<header></header>
<section id="homeContainer">
//content etc
</section>
</body>
</html>
CSS:
html{
height: 100%;
min-height: 100%;
}
body {
min-height: 100%;
width: 100%;
height: 100%;
margin: 0;
}
.bkgdImage {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100; (so it's behind your content)
margin: 0;
background: url(../yourimage.jpg) center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This works on my iPhone 5 and all mobile browers I've tested on. You might need to change the heights of html & body to suit your needs. You can see it working here and did a blog post on it.
I have setup full page background image of my index page. (PS: I have multiple pages in one index.html - index page, about page, services page ,etc.) I want this image to be shown on index page only. The rest of the pages should have white background.
This is my css code:
.ui-page, #index .ui-content{
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;
background-size:100% 100%;
}
The problem I have is on other pages if the content is short, background image from .ui-page is visible. How do I assign .ui-page to index.html page only?
Add the page id of the page that should have the background to the CSS rule:
#page1.ui-page{
background: url(http://lorempixel.com/1800/1800/abstract/2/) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size:100% 100%;
}
DEMO
In the demo page1 has the background and page2 does not.
I am making a website in which there is a background image which fills the entire screen. It works fine on desktop browsers, but does not render on an iPad. Here is the css:
body {
background: url('pics/net.png') no-repeat center center fixed;
background-size: cover;
}
The html is really just a panel that appears above the image. Any tips would be appreciated.
I need a fixed background that get the size of the browser, and it stay at that size, so the content will scroll up down, left, right, but the background stay fixed at back.
Is this possible to achieve with ipad2?
background: url("....") no-repeat fixed;
background-size: auto;
background-repeat: no-repeat;
background-attachment: fixed;
With this, the background is loaded at right size, but on scrolling it scroll to and the background color is shown.
To achieve that, you could use background-size: cover;
I'm not sure I understand the problem. If the goal is to design an iPad 2 specific background you could do something like that with the iPad's resolution in mind i.e. How large is the usable area in iPad Safari
#media screen and (max-width:1024px) {
body {
background:url(your-1024x690-image) fixed no-repeat; /*landscape background*/
}
}
#media screen and (max-width:768px) {
body {
background:url(your-768x946-image) fixed no-repeat; /*portrait background*/
}
}
Haven't tested it, but should do the trick.
For different browser support..
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
I'm working with Phonegap to develop an application for the iPhone.
I have the application design from our designer, and am trying to set the background for the index.html page. No matter what code I try, I cannot get it to display and I always end up with a white background.
I tried this but didn't work
<body style="background: url(images/bg.jpg) no-repeat;background-size: 100%;" >
I also tried creating a class in the end of the JQuery CSS file, and applying it to the main div or body of the page, that didn't work too
I even tried to override the whole body CSS, that didn't work either
body {
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;
}
Any Ideas?
First make sure the path is correct i.e. images folder is at same path as HTML page, or at CSS level if declared in CSS. If not that try putting images/bg.jpg in single quotes, so:
<body style="background: url('images/bg.jpg') no-repeat;background-size: 100%;" >