Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

background image shifts depending on browser

Posted on 2013-11-05
17
Medium Priority
?
395 Views
Last Modified: 2013-11-07
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

/*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;}
	

Open in new window

0
Comment
Question by:nsitedesigns
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
  • 3
  • +1
17 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39625373
Why don't you just set it as the background of
<div id="supersize">
and forget the <img>.
0
 
LVL 5

Expert Comment

by:Neil_Bradley
ID: 39625545
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
0
 

Author Comment

by:nsitedesigns
ID: 39625667
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
#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;

	}
	

Open in new window

0
Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

 
LVL 58

Assisted Solution

by:Gary
Gary earned 664 total points
ID: 39625688
Move it to you BODY tag with
background:url("img/back_fall_tree.jpg") no-repeat scroll 0 0 / cover  rgba(0, 0, 0, 0)
0
 
LVL 5

Accepted Solution

by:
Neil_Bradley earned 1336 total points
ID: 39625711
adding the background image to the html tag might be the way to go:
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;
}
0
 

Author Comment

by:nsitedesigns
ID: 39625784
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
0
 
LVL 5

Assisted Solution

by:Neil_Bradley
Neil_Bradley earned 1336 total points
ID: 39625792
At a guess you should remove the body colour (which looks to be white).
N
0
 

Author Comment

by:nsitedesigns
ID: 39625793
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_fall_tree.jpg") no-repeat scroll 0 0 / cover  rgba(0, 0, 0, 0);
0
 
LVL 58

Expert Comment

by:Gary
ID: 39625803
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
0
 
LVL 5

Expert Comment

by:Neil_Bradley
ID: 39625806
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
0
 
LVL 5

Expert Comment

by:Neil_Bradley
ID: 39625823
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
0
 

Author Comment

by:nsitedesigns
ID: 39625826
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?
0
 
LVL 5

Expert Comment

by:Neil_Bradley
ID: 39625850
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39625929
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&
0
 

Author Comment

by:nsitedesigns
ID: 39630586
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.
0
 

Author Closing Comment

by:nsitedesigns
ID: 39630664
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;
}
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39630955
This what is in the head of the rendered page:

<!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" />

Open in new window


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&
0

Featured Post

Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
This video teaches users how to migrate an existing Wordpress website to a new domain.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

660 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question