nsitedesigns
asked on
background image shifts depending on browser
Background image of leaves looks great in Safari. Not so good in Chrome and FF.
http://plymouthwisconsin.com/index.html
http://plymouthwisconsin.com/chamber_fall2.css
http://plymouthwisconsin.com/index.html
http://plymouthwisconsin.com/chamber_fall2.css
/*background image*/
#supersize img
{
height: 100%;
position: absolute;
width: 100%;
z-index: -100;
top: 1px;
}
#supersize{position:fixed;z-index:0;overflow:hidden;width:100%;height:100%;top:0;}
I agree with GaryC123
Update your css to something like:
#supersize{
background: url(yourimage.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Cheers,
N
Update your css to something like:
#supersize{
background: url(yourimage.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Cheers,
N
ASKER
Didn't work. Maybe the end div for the supersize is in the wrong spot. I put it right above the closing body tag. The background does not extend the full page.
Here is link:
http://plymouthwisconsin.com/test2.html
http://plymouthwisconsin.com/test.css
Here is link:
http://plymouthwisconsin.com/test2.html
http://plymouthwisconsin.com/test.css
#supersize{
background:url(img/back_fall_tree.jpg);
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Neil,
Tried your solution but it didn't work either. Here is a screen shot. As you can see, the background only fills the top and bottom of the screen. It is supposed to fit the left and right margins as well.
http://screencast.com/t/FraRG1e7U3
Tried your solution but it didn't work either. Here is a screen shot. As you can see, the background only fills the top and bottom of the screen. It is supposed to fit the left and right margins as well.
http://screencast.com/t/FraRG1e7U3
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Gary,
Your solution didn't work either. Got no background image at all.
Geez, this isn't supposed to be this hard!
http://screencast.com/t/OSbZNEUs
Is this supposed to be one declaration?
background:url("img/back_f all_tree.j pg") no-repeat scroll 0 0 / cover rgba(0, 0, 0, 0);
Your solution didn't work either. Got no background image at all.
Geez, this isn't supposed to be this hard!
http://screencast.com/t/OSbZNEUs
Is this supposed to be one declaration?
background:url("img/back_f
Do an hard refresh, it looks fine to me with it on the body tag.
n.b.
css cover is a CSS3 attribute so won't work in <=IE8
n.b.
css cover is a CSS3 attribute so won't work in <=IE8
By removing the body colour you will allow the background image to show up. Your screen shot shows the white body colour over the top of the html style (which contains the image).
The image is there, just covered.
N
The image is there, just covered.
N
Hi Gary,
you are correct re <=IE8.
” background-size:cover ” is the best solution for this issue. for ie7 and ie8 you could use jquery background image re-size plugin (Please visit the link: http://github.com/louisremi/jquery.backgroundSize.js).
You can use conditional statement only for IE7 & IE8 (helps to optimize site loading time).
Unfortunately when using more advanced CSS techniques to solve a problem or achieve an effect there will always need to be some compromise or fall back code for older browsers.
N
you are correct re <=IE8.
” background-size:cover ” is the best solution for this issue. for ie7 and ie8 you could use jquery background image re-size plugin (Please visit the link: http://github.com/louisremi/jquery.backgroundSize.js).
You can use conditional statement only for IE7 & IE8 (helps to optimize site loading time).
Unfortunately when using more advanced CSS techniques to solve a problem or achieve an effect there will always need to be some compromise or fall back code for older browsers.
N
ASKER
Neil, Your solution worked but alas, I do have to allow for older browser users so I cannot use it.
Gary, I cannot get your solution to work in Safari but it does work in Chrome and ff. Is there a workaround for Safari?
Gary, I cannot get your solution to work in Safari but it does work in Chrome and ff. Is there a workaround for Safari?
Visit https://github.com/louisremi/jquery.backgroundSize.js for a fall back solution.
N
PS: Demo here http://louisremi.github.io/jquery.backgroundSize.js/demo/
N
PS: Demo here http://louisremi.github.io/jquery.backgroundSize.js/demo/
The transitional doctype is going to contribute to cross-browser issues. You should be using HTML5 or XHTML strict.
I don't know that the 28 validation errors are contributing to the problem, but they are certainly not helping to create the desired rendering.
Cd&
I don't know that the 28 validation errors are contributing to the problem, but they are certainly not helping to create the desired rendering.
Cd&
ASKER
COBOL, I am using html5. When I create a new page in DW, that is the setting that I select.
See screen shot. Not sure why it appears that I am not using the right type of doc
http://screencast.com/t/xP26wfLQInD
The validation errors are mostly out of my control. They are all in the code for the animation. The animation is done with cu3ox which is a software that was recommended by an expert of expert-exchange.
See screen shot. Not sure why it appears that I am not using the right type of doc
http://screencast.com/t/xP26wfLQInD
The validation errors are mostly out of my control. They are all in the code for the animation. The animation is done with cu3ox which is a software that was recommended by an expert of expert-exchange.
ASKER
after some thought i decided to go with the following solution
html {
background: url(img/back_fall_tree.jpg ) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
html {
background: url(img/back_fall_tree.jpg
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This what is in the head of the rendered page:
For the page: http://plymouthwisconsin.com/index.html
Dreamweaver development tools and the way the page is actually generated and rendered are two different thing. The only way you know how the code is be ing seen by the client is to do view source in a real browser, not Dreamweaver.
Cd&
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
For the page: http://plymouthwisconsin.com/index.html
Dreamweaver development tools and the way the page is actually generated and rendered are two different thing. The only way you know how the code is be ing seen by the client is to do view source in a real browser, not Dreamweaver.
Cd&
<div id="supersize">
and forget the <img>.