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
Related
This is where I believe the problem to be.
Let me know if I'm wrong.
/* Home Style */
#tf-home{
background: url(../img/kristen11.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
color: #cfcfcf;
}
try
background-attachment: scroll;
instead of fixed as ios specially iphone and ipad has issue with background-attachment: fixed
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'm finding that the CSS below works as expected in desktop environments, but in iOS mobile environments, the image does not load at the background.
I've heard that fixed may not be workable in iOS environments, but I've also tested scroll - as well as multiple image sizes.
Thanks in advance
.intro {
display: table;
width: 100%;
height: 100%;
padding: 100px 0;
text-align: center;
background-color: #fff;
background: url(http://ak-hdl.buzzfed.com/static/enhanced/web03/2011/11/11/16/enhanced-buzz-22138-1321048705-11.jpg);
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
There were a couple of issues:
Fixed was not supported on all mobile browsers and call the background image to fail to load.
I found that (on the contrary to caniuse.com) the background shorthand wasn't working in all browsers.
Working code:
.intro {
display: table;
width: 100%;
height: 100%;
padding: 100px 0;
text-align: center;
background-color: #fff;
background-image: url(http://ak-hdl.buzzfed.com/static/enhanced/web03/2011/11/11/16/enhanced-buzz-22138-1321048705-11.jpg);
background-position: center;
background-attachment: scroll;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
I'm working on a site where you have some boxes with background-images as thumbnails. I have to use background-image because the CMS we are working on is pretty old-dated and the client won't change (mon€y is the main-problem).
i figured out a strange behavior in the iOs Safari on the iPad2 & iPhone5 (latest iOS) and don't know why.
Here's my code:
a img,
.thumb,
figcaption,
a:hover .thumb {
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.thumb {
height: 250px;
margin-bottom: 28px;
overflow: hidden;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
figcaption {
background-color: #b61910;
background-color: rgba(182, 25, 16, .85);
position: absolute;
height: 39px;
bottom: 35px;
color: white;
width: calc(100% - 30px);
}
figcaption h3 {
font-style: normal;
position: absolute;
bottom: 5px;
margin-top: 0;
margin-bottom: 0;
padding: 10px 0 0 5px;
transition: transform 0.3s;
transform: translate3d(0, 0%, 0);
}
a:hover h3 {
transform: translate3d(0, -20%, 0);
text-shadow: 1px 1px 1px #000;
}
a:hover figcaption {
height: 5px;
}
a:hover .thumb {
background-size: 120% 120%;
opacity: .8
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<a href="">
<div class="col-sm-12">
<figure class="thumb" style="background-image:url(http://lorempixel.com/output/food-h-c-850-890-7.jpg)">
<figcaption>
<h3>Product-Title</h3>
</figcaption>
</figure>
</div>
</a>
</div>
</div>
On my Desktop it shows the whole image but on iOS it looks like it shows the original size inside the thumbnail-box.
How can i solve this problem?
Any help would be great :)
Thanks
moesphemie
Maybe? https://css-tricks.com/forums/topic/full-page-backgrounds-on-ios-background-size-cover/
Code:
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;
Should I be able to use EL in css to access an img in the resources folder of a jsf 2 app? It does not seems to be working. In my css I've below:
.sectionDivider {
background-image: "#{resource['default:img/dashes.png']}";
background-position:center;
width:100%;
background-repeat: repeat-x;
height: 1px;
overflow: hidden;
}
When I access the page thru the browser, the background-image is not showing. When I view the CSS using browser Developer tools, the CSS looks like below (The background-image is missing):
.sectionDivider {
WIDTH: 100%; BACKGROUND-REPEAT: repeat-x; BACKGROUND-POSITION: center 50%; HEIGHT: 1px; OVERFLOW: hidden
}
I found the problem. I forgot to put url() in the background-image style. I changed to do below and it is working now:
.sectionDivider {
background-image: url('#{resource['default:img/dashes.png']}');
background-position:center;
width:100%;
background-repeat: repeat-x;
height: 1px;
overflow: hidden;
}