[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

background image that grows positioning

Posted on 2012-09-19
9
Medium Priority
?
415 Views
Last Modified: 2012-09-20
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
Comment
Question by:nsitedesigns
  • 3
  • 3
  • 2
  • +1
9 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 38415471
What browser, I cannot see any margin
0
 

Author Comment

by:nsitedesigns
ID: 38415473
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
 
LVL 58

Expert Comment

by:Gary
ID: 38415495
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:nsitedesigns
ID: 38415556
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
 
LVL 16

Expert Comment

by:s8web
ID: 38417727
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
 
LVL 16

Expert Comment

by:s8web
ID: 38417749
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
 

Author Comment

by:nsitedesigns
ID: 38417807
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
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 38417869
Change to position:fixed and add top:0 to the supersize div.
0
 
LVL 13

Expert Comment

by:Andrew Derse
ID: 38419182
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses

873 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