background: #27AE61 url("../images/banner.png") no-repeat scroll center center / cover;
The above CSS is working properly in firefox, google chrome and internet explorer but not on safari 5.7.1. Why ? What is the solution?
Try writing your css in long manner instead of shorthand way, like this:
background-color: #27AE61;
background-image: url("../images/banner.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
It looks the said version of Safari does not support shorthand css for background.
Related
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
I have searched all over the internet but I didn't get any solution.
Can anyone say what is the alternative for the css3 filter and for transistion3d in IE 11 and IE 12?
I don't want to use any Plugins.
Not for SVG
i want for <img> tag
Since filter is not supported with IE11 - there is ie hacks like this However it would have to include a lot of JS seen here which would mean writing browser detection in JS and more. -
You could try to add two kinds of images, one is the original image and another is a grayscale image. Then, using div to display these images. like this:
<style>
.grayscale {
background-image: url('images/Image1.jpg');
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center;
}
.grayscale:hover {
background-image: url('images/imag1_gray.PNG') ;
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center;
}
</style>
<div class="grayscale" style="width:500px; height:500px">
</div>
the result like this:
In my option, I prefer to use some JQuery plugin, like this.
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.
I have an image for a background for a div that doesn't exactly fit. Is there a way, using css, to change the size of the image (e.g. background-size:10%)?
.header-tab { background: transparent url(/resources/images/light-green-gradient.png) repeat-x scroll 0 0; }
background-size is a css3 value which can be set
see: http://www.w3.org/TR/css3-background/#the-background-size
or use this method
http://css-tricks.com/how-to-resizeable-background-image/
background-size isn't implemented yet in any browser, but there is -*-background-size for the newest versions of Mozilla, Webkit, Konqueror and (buggy) Opera:
background-size: 10%;
-moz-background-size: 10%;
-o-background-size: 10% auto; /* Opera needs x AND y values, or no background! */
-webkit-background-size: 10%;
-khtml-background-size: 10%;
Don't use it in Opera together with background-attachment:fixed.
Mozilla Developer Center has more and a workaround for Firefox 3.5.
For older browsers, you can emulate it with an img like in Jimmy's second link, but then of course you'd have to figure out how to hide that image from new browsers.