background image grows with monitor size

How do I create a site that has a background image that grows with monitor size but doesn't get distorted PLUS it stays put?  I've done websites with backgrounds that don't move but never one that resizes.

Here is a perfect example.  
http://www.travelwisconsin.com/
nsitedesignsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

 
Andrew DerseIT ManagerCommented:
Just make the background image ridiculously huge...that's what they did on that website...

The image size is: 2000px wide by 1200px high.  It's positioned in the upper-left hand corner of the screen so it never moves...
0
 
nsitedesignsAuthor Commented:
won't that mean it will take a long time to load on slower connections?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Andrew DerseIT ManagerCommented:
Not if you optimize the image...if you keep the image file size down it will still load fast like the web url you provided.

Photoshop does a great job in letting you know which format is the best for optimization...generally jpg.
0
 
nsitedesignsAuthor Commented:
Is there a size that I should not exceed?  What is the biggest I should shoot for?
0
 
Andrew DerseIT ManagerCommented:
I would say 2400 wide...there aren't too many that exceed that...for now...
0
 
GaryCommented:
Their background image is 315kb - I wouldn't say that is optimized!
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
0
 
Jagadishwor DulalBraces MediaCommented:
0
 
nsitedesignsAuthor Commented:
GaryC123,

Your option of Grow Media seems to be the most browser friendly.  

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

The other options provided by other experts were interesting but some had browser limitations or were not optimized, or were a slideshow and I didn't need a slideshow.

I tried it but could not get my sample page to display image.  I do not know js.  Would you be willing to take a peek to see what I did wrong?  If you can fix it, I will award you the points.

http://plymouthwisconsin.com/3.html
http://plymouthwisconsin.com/3.css
http://plymouthwisconsin.com/3.js
0
 
nsitedesignsAuthor Commented:
HOLD THE PHONE!  One of the links that I failed to try earlier seems to work pretty good!

http://css-tricks.com/examples/FullPageBackgroundImage/css-1.php#

I am now testing it on browsers.

http://plymouthwisconsin.com/4.html
0
 
Andrew DerseIT ManagerCommented:
You need jQuery for this...

Add this line ABOVE you js link.


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
0
 
nsitedesignsAuthor Commented:
nope  - - didn't work.
http://plymouthwisconsin.com/3.html
 

I am now testing 4.html in browsers.
0
 
Andrew DerseIT ManagerCommented:
Well, your js is failing because you have numbers before the code...

remove the 1,2,3,4,5 -- 39 before the code...then it might work.
0
 
nsitedesignsAuthor Commented:
Good catch.  I removed the numbers but it still fails.  Big fat white screen.
http://plymouthwisconsin.com/3.html


I tested 4.html and it doesn't test well.  So I am back to troubleshooting 3.html
http://plymouthwisconsin.com/4.html
0
 
Andrew DerseIT ManagerCommented:
Can you post the image you are using too?
0
 
nsitedesignsAuthor Commented:
here you go.
0
 
nsitedesignsAuthor Commented:
lets try this again....
back-leaves-fall.jpg
0
 
nsitedesignsAuthor Commented:
weird, my file name is actually back_leaves_fall.jpg but after I uploaded it, it converted the underscores to dashes.
0
 
Andrew DerseIT ManagerCommented:
Ok, this is working for me...unzip and replace your other files...
package.zip
0
 
nsitedesignsAuthor Commented:
I tried clicking on the package.zip link and it opened new blank window.  Tried dragging zip file to desktop and opening it but it was blank too.  DId i do something wrong?
0
 
Andrew DerseIT ManagerCommented:
You have to save the zip file to a place on your computer...then unzip the zipped file to where you have the same files on your web server...
0
 
Andrew DerseIT ManagerCommented:
Here is the code in seperate files...
index.html
3.js
3.css
0

Experts Exchange Solution brought to you by ConnectWise

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
 
nsitedesignsAuthor Commented:
I did save file to computer and double clicked it (how I normally open zip files on my mac) to download files.  That was when I ran into problems.  Thanks for the files.  Let me check them out.
0
 
nsitedesignsAuthor Commented:
Nukit,

I have another question open regarding this coding.  Please take a peek and let me know if you can help me.  The subject is "background image that grows positioning".  Another opportunity for more points!
0
 
Andrew DerseIT ManagerCommented:
Yeah, I think you closed this question, without handing out the points correctly.  Instead of closing it you should select who's solution was the answer to your problem...then it will auto close it out...but now we get less points...oh well.
0
 
nsitedesignsAuthor Commented:
I assigned a best answer (you) and then 2 supporting answers (you and Gary).  Not sure why question didn't close out.  I closed it like I normally do....

I opened a NEW question on  this coding and thought you would be able to help me out.
0
 
nsitedesignsAuthor Commented:
thanks all!
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.

All Courses

From novice to tech pro — start learning today.