Jump to content


Photo
- - - - -

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


  • Please log in to reply
7 replies to this topic

#1 ryanjohnjackson

ryanjohnjackson

    Super Member

  • Members
  • 143 posts

Posted 28 November 2011 - 05:37 AM

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!

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 28 November 2011 - 06:19 AM

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.
Posted Image

#3 ryanjohnjackson

ryanjohnjackson

    Super Member

  • Members
  • 143 posts

Posted 28 November 2011 - 07:23 AM

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.

#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 17580 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 28 November 2011 - 08:26 AM

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 ?

#5 ryanjohnjackson

ryanjohnjackson

    Super Member

  • Members
  • 143 posts

Posted 30 November 2011 - 02:49 PM

This is more what I meant:

Please Login or Register to see this Hidden Content

This is what I am kinda going for which seems to be a mix of rangelone and I wanted:

Please Login or Register to see this Hidden Content

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.

#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 30 November 2011 - 07:52 PM

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.

#7 ryanjohnjackson

ryanjohnjackson

    Super Member

  • Members
  • 143 posts

Posted 30 November 2011 - 08:46 PM

I just checked the w3schools stats on it, you're right.

Please Login or Register to see this Hidden Content



#8 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 30 November 2011 - 10:55 PM

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:

Please Login or Register to see this Hidden Content

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.