So I used Chrome Dev tools to check the responsiveness on an iphone and it looks fine. But when I check out the site on my actual iphone the background is completely different. Here is the link to my code https://github.com/CurtisKil/manesseGrading_2
How it looks on Devtools
How it actually looks on iphone
The problem here is:
background-attachment: fixed; does not work well with most browsers and especially does not work properly on iOS. (Read more here on why: How to replicate background-attachment fixed on iOS)
Quick Fix:
Don't use Background attachment fix for iOS.
So change your code in style.css from:
#home-section { background: url(../img/header-bg.jpg); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; min-height: 800px; }
To:
#home-section { background: url(../img/header-bg.jpg); background-repeat: no-repeat; background-size: cover; min-height: 800px; }
Alternate Solution:
Find workarounds for making background-attachment:fixed work for different browsers. Here is something to get you started:
Fixed background image with ios7
Fixed body background scrolls with the page on iOS7
Related
I've got a full width hero background that is working properly on every browser we tested except for Safari on iPhone and iPad. It does work on iMac Safari.
On iPhone and iPad it doesn't appear.
Here's the code:
.hero {
margin: 0;
padding: 0;
height: 600px;
background-image: url('../images/heroFullScreen.jpg');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
You can view the site here: https://sanitonplastic.ca to recreate the problem if you've got one of the devices.
Really hope someone can help, we're supposed to be going live tomorrow.
Thank you!
martinho and A Haworth were correct. I used a media query for mobile view and set background-attachment: scroll which solved the problem, although lost parallax.
I'm developing a website and i'm having trouble with Safari.
I'm using a background-image: -webkit-linear-gradient that is working perfect on Chrome, Firefox, etc... but when it comes to Safari, the output is different.
It is showing only on half of the screen.
I'm using this style on the body:
body {
background-image: -webkit-linear-gradient(-40deg, #000,#333 50%, #f9f9f9 50%);
background-size: auto 1200px;
-webkit-background-size: auto 1200px;
background-repeat: no-repeat;
background-attachment: scroll;
top: 0;
left: 0;
}
I've tried searching for a solution, but so far nothing seems to work. I've tested changing the background size to cover but it doesn't give the output i intend, as well as setting top: 0; and left: 0; as shown in other question around stackoverflow, but that didn't work too.
The link to the specific page i'm talking about is this one: https://dashiofficial.com/product/test-product-01
Does anyone know the solution for this problem?
Thanks in advance.
I have checked your website and was able to fix your safari problem.
It has nothing to do with the gradient you defined for body{} but with the background-size for .single-product{}
Try to change
.single-product {
background-size: auto 1060px;
}
to
.single-product {
background-size: 100% 1060px;
}
It works for me in Chrome and Safari (not tested in Edge or Firefox).
I'm reading news on this page mostly on my mobile device:
link
The big banner right of the logo is not scaling properly on the mobile device.
So when you resize the window and make it smaller everything is resizing except the banner.
Im learning php, css and just wondering how this could be solved. Ive checked also on stackoverflow and find something like:
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */ }
I've tried this also in the dev. mode of google chrome but it desnt work.
Is this solvable with the provided data from the dev mode?
Code looks like:
<div style="position:relative;
width:728px; height:90px; z-index:10;
background-image: url(http://www.image.jpg);">
Based on your code, the banner is implemented as background image, not an IMG element. To make background image scaled so that it's entirely visible, use background-size: contain. So your user styles could be like this:
.site-header-banner > DIV {
background-size: contain;
background-repeat: no-repeat; // To disable repeating background image.
max-width: 100%;
}
You can use it as a background with the following properties:
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
https://jsfiddle.net/alexndreazevedo/xe9tvkyr/
You can define a fixed size to DIV containing image background and change it by media query.
I'm using these rules and looks fine on desktop and firefox mobile:
body{
background: url(../img/home-background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
background-size: cover;
}
But on mobile webkit browsers (safari and chrome), the image appears wrong, with zoom.
The problem comes probably from the fixed position on your background image. It's a common issue on Sarafi mobile.
I have a not so unusuall problem but either my google skills suck or I don't know how to ask and find solutions to my problem.
I am using bootstrap3 to build my website which looks fine on IE 8 except for a banner part.
The outer .row div is 100% with a background image covering the full with. Inside the div, I have a .container div has centered content leaving some space on both ends.
In all browsers except IE8, this design works fine but on IE, the background image only goes as far as the .container leaving white space on both edges.
Here is my css
.heading
{
background: url(../images/inner-heading-bg.png) no-repeat scroll;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
min-width: 50px;
min-width: 100%;
}
Please see attached image for IE
IE8 doesn't support background-size: cover; by itself, it needs a little push in the back.
You can use a polyfill like: https://github.com/louisremi/background-size-polyfill to get it working in IE8.