I'm developing an Asp.Net MVC site with jQuery Mobile.
I've this CSS part to set the background image to be fixed in the center of the site while scrolling:
background: white url(Image/A-HD.jpg);
background-repeat: no-repeat;
background-position: 50% 50%; /*or center center */
background-attachment: fixed;
background-size: 50%;
It works everywhere, except for the iPad 2 (the only one I tested). Seems like background-attachment: fixed; doesn't work properly: the background image actually stays in the center, but doesn't follow my scroll.
So, is there a way to simulate background-attachment: fixed; for iPad2 (and similar, I suppose)?
Thanks!
You can potentially get around this using a separate element and position: fixed which does work!
HTML:
<div id="Background"></div>
<div id="Content"></div>
CSS:
#Background {
background: white url(Image/A-HD.jpg) no-repeat 50% 50%;
background-size: 50%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Related
I've searched everywhere for a solution to this but can't seem to solve it. The main background image here zooms in massively on iPhone. This is my background image code:
.home-featured {
background-image: url(/Roombg2.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
background-color: #bbbbbb;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I'm not sure if other CSS for home-featured is causing any problems:
.home-featured .wrap {
margin-top: -160px;
max-width: 782px;
display: table;
text-align: center;
}
.home-featured .home-widgets-1 {
display: inline-block;
display: table-cell;
vertical-align: middle;
width: 100%;
padding: 200px 0;
font-size: 20px;
}
Any help would be hugely appreciated - I'm completely lost on this!
Probably you need to configure the meta viewport tag. In the iphone the viewport behaves a little different.
Check this: Configuring the viewport
I have a webpage: www.kvf.fo/vit and when visiting it on an iPad or iPhone, the background-image is slightly movable or draggable, so the the background-color is showing (behind). This is only if you try to drag at the top or at the bottom, or side to side. Any have a solution to this?
CSS Code
body {
background-color: #0083B3;
background-image: url('../images/bakgrundin_jol3.png');
background-size: cover;
background-attachment: fixed;
background-position: left top;
color: white;
overflow-x: hidden;
height: 100%;
}
This won't be possible because the background-image is sized for your screen size.
I am trying to draw a half circle and rotate it using CSS. Like so;
To style the div.circle I use border-radius:50%; then I wrap it in an overflow:hidden; div.mask that is half the width of the circle, thus hiding half of the circle. Then I use transform:rotate(45deg) to rotate the div.mask. This works fine in all browsers that I've tested.
<div class="mask">
<div class="circle"></div>
</div>
.mask {
outline: 1em solid red;
overflow: hidden;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.circle {
-webkit-border-radius: 50%;
border-radius: 50%;
background: blue;
width: 200%;
height: 100%;
}
But when I place this element in a block that has overflow-scrolling:touch; and overflow:scroll; and view it on Mobile Safari on iOS7 the half circle becomes a full circle because the overflow:hidden; on the div.mask doesn't seem to have an effect anymore.
.scroller {
border: 1em solid green;
overflow: scroll;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
How do I fix this?
Here's a live example
I have a web-view with blurry text in iOS 7. There are many posts with solutions, however none of them seem to work in my case. The best solution that I've found thus far is to apply -webkit-transform: translateZ(0); to the blurry elements, as seen here. But doing this causes -webkit-overflow-scrolling: touch; to become inoperable. Any advice would be much appreciated.
UPDATE: Here is the CSS associated with the scrolling wrapper and elements containing blurry text
#scrolling_element {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
-webkit-overflow-scrolling: touch;
overflow: auto !important;
}
.elements_w_blurry_text {
position: relative;
border: 1px solid #000;
background-image: url("../path/to/img.png");
background-repeat: repeat;
-webkit-transform: translateZ(0);/* or any other suggested code*/
}
Try adding this into your css:
-webkit-text-size-adjust:none;
I'm using CSS sprite sheets for a page I'm creating for mobile devices. I've got the layout how I want it, and here's the CSS I'm using for that (this looks fine on Chrome Canary's iPhone 3GS emulator):
div#logo {
background: url('/static/images/iphone/iphone_landing_sprites_small.png') -114px 0px no-repeat;
display: inline-block;
width: 90px;
height: 44px;
display:block;
float:right;
margin:10px;
}
div#stars {
background: url('/static/images/iphone/iphone_landing_sprites_small.png') -114px -46px no-repeat;
display: inline-block;
width: 71px;
height: 12px;
}
div#iPhone {
background: url('/static/images/iphone/iphone_landing_sprites_small.png') 0px 0px no-repeat;
display: inline-block;
float:left;
width: 112px;
height: 238px;
margin-top: 54px;
}
div#separator {
background: url('/static/images/iphone/iphone_landing_sprites_small.png') -114px -60px no-repeat;
display: inline-block;
width: 1px;
height: 53px;
}
Of course, when viewing this on a Retina display the images come out slightly pixellated. I followed the advice in this tutorial for switching sprite sheets for different display densities, and added this:
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 240dppx) {
div#logo {
background-image: url('/static/images/iphone/iphone_landing_sprites.png');
background-position: -226px 0px;
}
div#stars {
background-image: url('/static/images/iphone/iphone_landing_sprites.png');
background-position: -226px -91px;
}
div#iPhone {
background-image: url('/static/images/iphone/iphone_landing_sprites.png');
background-position: 0px 0px;
}
div#separator {
background-image: url('/static/images/iphone/iphone_landing_sprites.png');
background-position: -226px -117px;
}
}
So now my page still displays fine on the iPhone 3GS simulator (since the #media switch does nothing to it) but when looking at it from an iPhone 4 simulator the images come through as double the size. The layout stays the same (the frames displaying the images are the same size) but the images are cropped so you can only see the top-left quarter of each image.
Is there some other attribute I need to specify to make the images squeeze into the double-density pixels while maintaining the same size on the screen?
I found a solution: instead of defining the new offsets for each element like so:
background-position: -226px 0px;
We just need to 'pretend' that the image is the same size it used to be. So we set the background-size attribute to the size of the smaller sprite sheet:
background-size: 204px 238px;
...and that seems to work!