Jump to content
Sign in to follow this  
ryanjohnjackson

How to make background images always 100%....

Recommended Posts

ryanjohnjackson

Basically, I want to have an image always take 100% of the background up BUT I need this to work with IE 6/7 as well. I'd also like to know what is a safe file size for this. I don't want to slow my loads to a crawl for users with slow connections. Thanks!

Share this post


Link to post
Share on other sites
Rob
Probably 2048px wide is safe. The less colors you use in your background, the better.So if you're going to have any "graphic" try to keep that at the top and make the sides and bottom one or two colors. Here's one I use on two of my sites. Please note the canvas is built directly into the background. [img]http://www.schisholm.com/wp-content/uploads/2011/10/cgroupback.png[/img]

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
ryanjohnjackson
rangelone, Thank you. That answers part of my question but I've read you can put code in to expand/contract the photo. So you put a large image in and no matter how large or small the browser is it fits to it.

Share this post


Link to post
Share on other sites
Danny
Hi Ryan, What Rangelone, suggested is correct, if you look at his image, the canvas (white section) is simply being repeated, doing this will make it fit all screen sizes. However, why do you need this to work on IE6 ?

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
ryanjohnjackson
This is more what I meant: http://css-tricks.com/3458-perfect-full-page-background-image/ This is what I am kinda going for which seems to be a mix of rangelone and I wanted: http://denverlibrary.org/ I was able to do it with a huge image but the detail level is garbage since I had to compress the crap out of it and chose to remove most colors. Also, I don't need IE6. I kinda picked up on all this where I left off 3-4 years ago. I checked the recent stats and IE6 is only like 1.5% in the US. But for IE 7/8 I'd like something that can convert CSS3 to be compatible. I tried CSS Pie but it doesn't work that great.

Share this post


Link to post
Share on other sites
Rob
Given the CSS options provided in css-tricks.com, you could add their code to Dashboard > PlatformPro > Custom Code in the CSS Rules area. It may need some tweaking. In fact, I'd put money on that. You will still get some degree of graininess. But being a background, it's okay. BTW, the denverlibrary site background looks fine. I think only 3.4% worldwide use IE7 and most of those are outside the US.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
ryanjohnjackson
I just checked the w3schools stats on it, you're right. http://www.w3schools.com/browsers/browsers_stats.asp

Share this post


Link to post
Share on other sites
kastelic
If you need to make it work for non-css3 browsers than a javascript solution will be more compatible. Here's an example i found by googling: http://srobbin.com/blog/easy-full-screen-background-images-with-jquery/ Regarding browser usage, the w3schools.com data is not reliable because it isn't representative of the web. Here's the quote from that page: W3Schools is a website for people with an interest for web technologies. These people are more interested in using alternative browsers than the average user. The average user tends to the browser that comes preinstalled with their computer, and do not seek out other browser alternatives. In general the numbers for w3schools for Firefox and Chrome will be much higher than the rest of the web, something like 15-20% higher. The best way to determine what browsers to design for is by using the analytics from your own site, that way you know what your customers are using.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×