[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

background image grows with monitor size

Posted on 2012-09-18
28
Medium Priority
?
504 Views
Last Modified: 2012-09-24
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/
0
Comment
Question by:nsitedesigns
  • 14
  • 10
  • 2
  • +2
28 Comments
 
LVL 13

Expert Comment

by:Andrew Derse
ID: 38411618
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
 
LVL 58

Assisted Solution

by:Gary
Gary earned 800 total points
ID: 38411628
0
 

Author Comment

by:nsitedesigns
ID: 38411666
won't that mean it will take a long time to load on slower connections?
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 13

Expert Comment

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

Author Comment

by:nsitedesigns
ID: 38411679
Is there a size that I should not exceed?  What is the biggest I should shoot for?
0
 
LVL 13

Expert Comment

by:Andrew Derse
ID: 38411689
I would say 2400 wide...there aren't too many that exceed that...for now...
0
 
LVL 58

Expert Comment

by:Gary
ID: 38411705
Their background image is 315kb - I wouldn't say that is optimized!
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 38411709
0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 38412399
0
 

Author Comment

by:nsitedesigns
ID: 38413889
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
 

Author Comment

by:nsitedesigns
ID: 38413947
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
 
LVL 13

Assisted Solution

by:Andrew Derse
Andrew Derse earned 1200 total points
ID: 38413961
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
 

Author Comment

by:nsitedesigns
ID: 38413976
nope  - - didn't work.
http://plymouthwisconsin.com/3.html
 

I am now testing 4.html in browsers.
0
 
LVL 13

Expert Comment

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

Author Comment

by:nsitedesigns
ID: 38414135
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
 
LVL 13

Expert Comment

by:Andrew Derse
ID: 38414144
Can you post the image you are using too?
0
 

Author Comment

by:nsitedesigns
ID: 38414164
here you go.
0
 

Author Comment

by:nsitedesigns
ID: 38414169
lets try this again....
back-leaves-fall.jpg
0
 

Author Comment

by:nsitedesigns
ID: 38414177
weird, my file name is actually back_leaves_fall.jpg but after I uploaded it, it converted the underscores to dashes.
0
 
LVL 13

Expert Comment

by:Andrew Derse
ID: 38414225
Ok, this is working for me...unzip and replace your other files...
package.zip
0
 

Author Comment

by:nsitedesigns
ID: 38414324
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
 
LVL 13

Expert Comment

by:Andrew Derse
ID: 38414341
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
 
LVL 13

Accepted Solution

by:
Andrew Derse earned 1200 total points
ID: 38414347
Here is the code in seperate files...
index.html
3.js
3.css
0
 

Assisted Solution

by:nsitedesigns
nsitedesigns earned 0 total points
ID: 38414385
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
 

Author Comment

by:nsitedesigns
ID: 38417652
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
 
LVL 13

Expert Comment

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

Author Comment

by:nsitedesigns
ID: 38419163
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
 

Author Closing Comment

by:nsitedesigns
ID: 38427976
thanks all!
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

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…
Ready to get certified? Check out some courses that help you prepare for third-party exams.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

829 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