• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 418
  • Last Modified:

background image that grows positioning

I just learned how to put on a huge background image for a site of mine but now I can't figure out why there is a white top margin.  How do I bump up the background image.  Please note, that I do not know js.  I got the code from a coding site that offered it as an example and am trying to use it on my site.  I checked for top margin and padding but could not find where this was referenced.

http://plymouthwisconsin.com/fall.html
http://plymouthwisconsin.com/chamber_new.css
http://plymouthwisconsin.com/3.js
0
nsitedesigns
Asked:
nsitedesigns
  • 3
  • 3
  • 2
  • +1
1 Solution
 
GaryCommented:
What browser, I cannot see any margin
0
 
nsitedesignsAuthor Commented:
I had to change the files a bit.  So, for the css file, please reference
http://plymouthwisconsin.com/chamber_fall2.css

  /*background image*/
	#supersize {
    position: fixed;
	
    }

#supersize img {
    height:100%;
    position:absolute;
    width:100%;
    z-index:0;
    }  

Open in new window

0
 
GaryCommented:
For a start it's the body that should have the background image.
As it is at the moment IE has a yellow border at the top and FF has a yellow border at the left
Add a margin:0 to the body css.
0
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
nsitedesignsAuthor Commented:
If I put the background image on the body, the image will move.  This is the site that I got the code from.  It was recommended by another expert

http://growmedia.ca/blog/2009/10/14/resizable-full-browser-background-image-with-jquery-preserving-aspect-ratio/
0
 
s8webCommented:
Try:

#supersize img
{
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 0;
  top:0;
  left:0;
}

Open in new window


Get rid of the duplicate selector and fixed if you haven't already.
0
 
s8webCommented:
Also, FYI... You don't need the JS to do this

#supersize{position:absolute;z-index:0;overflow:hidden;width:100%;height:100%;}
#supersize img{width:100%;}

Open in new window

0
 
nsitedesignsAuthor Commented:
I removed the following from fall.html

<!-- Background image -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="3.js"></script>

I added the following to css:
      /*background image*/
#supersize img
{
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 0;
  top:0;
  left:0;
}
      
      #supersize{position:absolute;z-index:0;overflow:hidden;width:100%;height:100%;}
      

No change.
http://plymouthwisconsin.com/fall.html
0
 
GaryCommented:
Change to position:fixed and add top:0 to the supersize div.
0
 
Andrew DerseIT ManagerCommented:
You must have got it working because it looks GREAT in IE9 and FF.

Ps...Plymouth, WI...hello neighbor!  ( I'm from Reedsburg, WI )
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

  • 3
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now