Has anyone found a solution for making a background image cover the entire div section on iOS? Code words perfectly on android. I am looking for a CSS solution
background: url('../img/slide/contact_background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size:cover;
background-size: cover;
Try removing "fixed" since it's probably causing the problem with iOS:
background: url('../img/slide/contact_background.jpg') no-repeat center center;
This should work on both Android and iOS browsers.
There is some more info here (and brief testing shows that it's not better in the iOS8): How to replicate background-attachment fixed on iOS
Related
I have a question about fixed background issues on Mac.
Background is appearing choppy on Safari Mac, client reported this, I am on Windows 7, and it looks good in every browser.
Does anyone have a solution for this?
Here is my website
http://www.barrusinjurylawyers.com/
and the background code :
body {
margin:0 auto;
background: url('http://www.barrusinjurylawyers.com/wp-content/uploads/2015/04/SA-Color-Mesh-1680x1050-72dpi1.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I have a problem with a background image I have when trying to stretch across the entire window. external CSS below:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("mybackground.jpg"); -webkit-background-size: cover; background-repeat: no-repeat; background-size: 70%;}
#font-face /* support for browsers & IE v10 onwards*/
{
font-family:homefont; src: url("font3.ttf");
}
#main
{
position:absolute;
left:450px;
top:30px;
font-family: homefont;
font-size:150px;
line-height:70%;
}
This is what I have (see white space to the right of the image on the browser window):
Can anyone advise me on how to stretch the image across the entire window?
I have tried the suggestions as advised in the comments, however - the image appears to be cut from my knees downward :(. Are there any other suggestions?
Here is an axcellecnt article about your problem on css-tricks
Awesome, Easy, Progressive CSS3 Way:
html {
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;
}
You can try this
background-size: 100%;
or
background-size:cover
Here you go:
html {
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;
}
Works in:
Safari 3+
Chrome
IE 9+
Opera 10+ (Opera 9.5 supported background-size but not the keywords)
Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
top center;background-size-110%;background-repeat- no-repeat
Please increase the size as you like.
Scale the background image to be as large as possible
You need to use the background-size property with the value cover like below
body {
background-image: url("mybackground.jpg");
background-repeat: no-repeat;
background-size: cover;
}
Source
In Chrome if you scroll down so the header is half way crossing your browser and you you click the Watch Video button which opens up the modal which is normal but upon closing it if you scroll up I get this strange interference with the background image and also the button, like the background image is cut off and the button adds crazy background with a border on it?
Has anyone experienced this before and know of a fix, only in chrome
Website: http://goo.gl/s3kLML
Screenshot example:
http://imgur.com/OUZ6d3s
Thanks
Sounds like a background-attachment: fixed + background-size: cover bug, just remove "fixed" in your background property, it will works.
.jumbotron {
background: url(../images/bg_blur2.jpg) #e8df06 center no-repeat;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
background-size: cover;
padding: 0;
}
Or if you want your background to be fixed in all other browser and just fix this bug in Chrome, you can try :
#media screen and (-webkit-min-device-pixel-ratio:0) {
.jumbotron {
background: url(../images/bg_blur2.jpg) #e8df06 center no-repeat;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
background-size: cover;
padding: 0;
}
}
I have some difficulties showing a scaled background on different browsers. I created the website on a Google chrome browser, but when loading the site on a iPhone or earlier version of IE, the background doesn't scale, or just doesn't show at all.
I simply used the css code:
background-size: 100% 150%;
Then I changed it to:
background-size: auto;
But this still gives some troubles.
Any idea how I could resize/scale this image on every browser and IE from version 6 to now?
EDIT
With the code below, everything works on Chrome, FF and latest IE, But on IE8(and below I think) it show the unstretched picture. On iPhone it simply doesn't show anything at all. :/
#head-div
{
padding-bottom: 15%;
width: 100%;
background: url(../img/banner.gif) no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/banner.gif', sizingMethod='scale');
}
body {
background: url(image.jpg) no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg', sizingMethod='scale');
}
These are the requirements for cross browser. There's like 5 of these exact questions already on stack overflow with answers exactly like mine so there was no need to ask this question
I suggest using the CSS3Pie polyfill script.
This script seamlessly adds support for various CSS features to old IE versions, including background-size.
It works in IE6 and up, and requires only a tiny bit of extra code in your CSS file to activate it, which other browsers will ignore entirely.
I'm working on a basic html page and I have this background image bg.jpg.
But the problem is depending on the screen size you have and how many pixels the screen has I'm not able to view the whole background image which is something I want.
How do I make the background fixed so you can see the whole background?
If you mean a full page background image than you can simply do it with CSS3 background-size property
body {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
If you need to attach it, kinda fixed and shouldn't be scrolled, than use
background-attachment: fixed;
/* This is already used in above CSS declaration using CSS Short Hand*/
You can do something like this:
html {
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;
}
You can read more here: link
Delete your "body background image code" then paste this code:
html
{
background: url(../img/bg.jpg) no-repeat center center fixed #000;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can use CSS pseudo selectors.
body:after
{
content: url(your_image)
/* Styling your image here just like a div */
}
Of course those other solutions are OK too, but they only work in latest modern browsers. This pseudo selection solution works in most browsers used today. If you'd like to support even older browsers, like ancient versions of IE, then you can use a div to contain the background image and style it as you'd like.