I am doing a iPhone app using Phonegap & also using jquery mobile. I want to set background image for data-role=page div. In this height of page is equal to screen & hence background is set to size of screen. But the page content length is much greater than screen & hence gray background is seen after image completes.
My question is whether there is a way so that we can keep the background image fixed & scroll or move only content of page & not background image.
Just to mention I have tried full size background jquery pluggin. Its working on Android but not on iOS.
Can anyone please help? Thanks in advance.
Ok, so what I did instead was to create a fixed element within the body element of the page.
So it would look like
<body>
<div id="background"></div>
...
</body>
And for the CSS I stated the following:
#background {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background: url(images/bg-retina.jpg) 0 0 no-repeat fixed !important;
background-size:contain;
}
And this did the trick for me. Hopefully it helps (someone out there :P)
You looking for css background-attachment property.
div[data-role="page"]{
background-attachment: fixed;
}
Update:
background-attachment:fixed is supported from iOS 5, if you using older version of iOS you may consider usage of iScroll.
you can try this:
.ui-mobile
.ui-page-active{
display:block;
overflow:visible;
overflow-x:hidden;
}
works fine for me.
You can set your background image to the jQuery page:
.ui-page { background-image:url(../ios/sample~ipad.png);
background-repeat:no-repeat; background-position:center center;
background-attachment:scroll; background-size:100% 100%; }
Try with this, this work for me.
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background: url(../Images/loginBackground.jpg) 0 0 fixed !important;
background-size:100% 100%;
background-repeat: no-repeat;
<body>
<div id="background"></div>
...
</body>
css:
#background {
background-image: url("/images/background.png");
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
width: 100%;
position: fixed;
background-position: 0 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media screen and (max-width: 480px) {
#background {
background-attachment: initial !important;
}
}
The problem is that iOS mobile devices have errors rendering simultaneously background-size:cover; and background-attachment:fixed; so you have to fix it by #media
Related
I created a responsive html email using the media queries method mentioned in this article. It works perfectly on outlook mobile app and its mentioned that it should work on iOS mail but it doesn't, any ideas how to fix that? This is the media queries part of the code:
#media screen and (max-width: 375px) {
*[class="padding"] td, .padding td {
padding: 24px !important;
}
*[class="mobile_scale"], .mobile_scale {
width:100% !important;
max-width: 100% !important;
min-width: 100% !important;
}
*[class="shorten_space"], .shorten_space {
height: 16px !important;
line-height: 16px !important;
}
*[class="mobile_scale"] img, .mobile_scale img {
width:100% !important;
height: auto;
}
*[class="mobile_center"], .mobile_center {
align-items: center !important;
text-align: center !important;
margin: 0 auto !important;
}
*[class="sub_button"], .sub_button {
align-items: left !important;
text-align: left;
padding-top: 16px;
}
}
Campaign Monitor's articles on email are very dated, unfortunately.
You don't need these at all: *[class="shorten_space"]. I believe from memory that was a hack to get classes working for Yahoo webmail, and they've updated years back so we don't need that anymore.
Just use the standard css, i.e. .shorten_space
(For all of them)
That would be a reason why it wouldn't on Gmail apps, though, not iOS. That's because Gmail removes all style blocks that it doesn't agree with.
I'd say the reason why it wasn't working for iOS, though, is becaues of the 375px limit. iPhones tend to be larger these days. Try bumping that up to 450px or so.
I've looked and looked for what should be a simple answer, and for some reason I can't find it.
I'm experimenting with this amazing slider gleaned from the example here. I'd be happy if mine looked like this, considering that my slider has larger images.
When I reset the code to accommodate the larger images I lost the entire thumbnail panel and its black background. Obviously I also lost the thumbnail navigation.
You can see from my page that I've added a border. Regardless of the container size, the thumbnails have disappeared either way.
I would be grateful if someone points me to the code or js that deals with this. I would also appreciate if someone gave me some idea about the many selectors such as .jssora05r and .jssora05rdn, none of which have any html equivalent and leave me wondering what purpose they serve or whether they can just be omitted.
Please use class name to define css for slider1_container.
.slider1_container {
position: relative;
width: 960px;
height: 628px;
/*border: 20px solid #E1D9CC;*/
overflow: hidden;
/*margin: 90px auto 0;*/
margin: 0 auto;
padding-bottom: 0;
}
And remove the following codes,
#media only screen and ( max-width: 1152px ) {
.slider1_container {
max-width: 92%;
border-width: 15px;
}
}
#media only screen and ( max-width: 800px ) {
.slider1_container {
margin-top: 10px;
border-width: 10px;
max-width: 90%;
}
}
#media only screen and ( max-width: 640px ) {
.slider1_container {
border-width: 5px;
}
}
And also, jssor.js is missing in your code. Please replace
<script src="../js/jssor.slider.js" type="text/javascript"></script>
with
<script src="../js/jssor.js" type="text/javascript"></script>
<script src="../js/jssor.slider.js" type="text/javascript"></script>
Edit
<div id="slider1_container" class="slider1_container" ...
Move thumbnails
Slides are always in slides container. If you make slides container smaller than slider1_container, then you have rest space to place your thumbnail navigator. You can use css to set position of your thumbnailnavigator, for example
<div u="thumbnavigator" class="jssort01" style="left: 0px; bottom: 0px;">
Reference:
http://www.jssor.com/development/tip-arrange-layout-adjust-size.html
http://www.jssor.com/development/reference-ui-definition.html
Apple have just released their new iOS7 operating system but it's causing issues with my retina icon media queries. It appears the background-size property is being ignored. An example image is here: http://imgur.com/R3OgFgN
The image replacement works perfectly on iPhones 4, 4s, 5 running iOS6 and below (any browser). iOS7 browsers appear to grab the high-res image but ignore the background-size property:
#media (-webkit-device-pixel-ratio: 2){
.b .logo{
background: url(../img/2x/m-yellloh-logo#2x.png) no-repeat 0 0 !important;
-webkit-background-size: 100%;
-moz-background-size: 100%;
background-size: 100%;
}
What it does do;
Replaces the original image with the #2x image
What it doesn't do;
Fit the background image to the div element size.
Tested on iOS7 Safari & Chrome.
Has anyone had this problem, and if so how did you manage to fix it?
I solved it! Turns out, iOS7 resets the background-size property when running a media query. The trick is to specify the background-size with the exact pixel dimensions, or with a 100% value like so;
#media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx){
.logo{
background: url(../img/2x/logo#2x.png) no-repeat 0 0 !important;
background-size: 100% !important;
width: 30px;
height: 40px;
}
N.b - I also found that including the !important tag ensured all retina devices read the query properly, including Samsung S3 & S4. Enjoy.
This is not buggy behaviour. This is your fault.
You set all background properties here:
background: url(../img/2x/m-yellloh-logo#2x.png) no-repeat 0 0 !important;
so browser treats this as
background-image:url(../img/2x/m-yellloh-logo#2x.png) !important
background-position:0 0 !important
background-repeat:no-repeat !important
background-size:auto auto !important
and so on
thus your last line background-size: 100%; is overridden by background-size:auto auto !important;
Because the example is an image. I cannot inspect the code.
You might try the following option:
If the div's width and height is fixed. You can set a fixed width and height to the image. also normally the retina-display need the "min-device-pixel-ratio" for high resolution display.
e.g.
#media (-webkit-min-device-pixel-ratio: 2)
and (min-device-pixel-ratio: 2){
.b .logo{
background: url(../img/2x/m-yellloh-logo#2x.png) no-repeat 0 0 !important;
width: 200px;
height: 100px;
}
or if the div is not fixed.
#media (-webkit-min-device-pixel-ratio: 2)
and (min-device-pixel-ratio: 2){
.b .logo{
background: url(../img/2x/m-yellloh-logo#2x.png) no-repeat 0 0 !important;
background-size: contain;
}
Try if this can fix your issue.
Cheers!
My footer and other container divs seem unaligned in iPhone Safari (it looks OK on Android):
Nothing had worked so far. What could be the cause?
CSS:
html,
body,
#wrapper {
height: 100%;
}
body > #wrapper {
height: 100%;
min-height: 100%;
}
#content {
clear: both;
padding-bottom: 36px;
}
#header,
#content,
#footer {
padding-left: 20px;
padding-right: 20px;
}
.container {
margin: 0 auto;
width: 960px;
}
#footer {
background: url(images/footer_bg.png) repeat-x 0 0;
margin: -65px 0 0;
padding: 15px 0 14px;
position: relative;
clear: both;
height: 36px;
}
Live site:
http://www.pixelmatic.com/index-2/
You haven't really defined clear wrappers for your content sections, which makes this a bit harder to get everything to align. You could put some left padding on the left footer element if you wanted to move it over a bit, as it doesn't look great right up against the edge of the screen.
Anyhow, the section with the quote marks (top pink arrow in your image) is moved right by 4px because of the left margin of 4px on the latest-news div. You'll see the same thing by narrowing your desktop browser.
First I think it's the difference between the android and ios browser that will explain the difference between the browsers. Mobile browsers use zooming to fit a website to the device screen. Source: http://davidwalsh.name/zoom-mobile-browsers
<meta name="viewport" content="user-scalable = yes">
I think it's better to change it, so that the browser zooming is removed.
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1">
Second: there is an extra css rule that overrides your .container:
.page-template-front-page-2-php .container {
width: 971px !important;
}
Maybe the css rule is forced to fit the screen.
The .container contains floating elements. De #content .container uses a overflow: hidden, but the #home-feed and #footer .containers doesn't have this declaration. The overflow: hidden will force the parent div to "see" that there is content inside. There are some disadvantages, but maybe it will do the trick.
Extra tip: why don't you use a css framework with a grid system like Twitterbootstrap, Foundation or Groundwork ?
should be center-aligned website
I have built a website as above link, with wrapper center aligned properly in PC/Mac browsers. However, when running in iphone safari, it is left aligned, but not center aligned.
the wrapper code is:
#wrapper {
width: 939px;
background-color: #fff;
margin: 40px auto 5px auto;
padding-bottom: 50px;
}
Any ideas on it?
Thanks.
have you tryd:
#wrapper{
text-align: center;
}
#wrapper <yourChildrenId/yourChildrenClass/yourChildrenTag>{
display: inline-block;
//or
display: inline;
}
Mini hack, but if you set meta content width to the widest centered div it forces the iPhone screen to be that wide and doesn't mess the div centering up.
<meta name="viewport" content="width=[widest centered div];"/>
#wrapper{
width: 939px;
background-color: #fff;
margin: 0 auto;
padding-bottom: 50px;
}
Should do it. I dont know why you need the margin-top.? The provided link doesn't seem to work.
If you only need to support iPhone Safari or CSS3 compatible browsers, here's an elegant approach: http://www.html5rocks.com/en/tutorials/flexbox/quick/#toc-center