Forums

FIT TO BROWSER??

Permalink
I have a background image on my website, but when someone is on a bigger monitor or expands their browser, the background image stays the same size, and the extended area shows nothing but blank space. How can I make the background image expand WITH the browser size? The current code I'm using looks like this:

#body{ position: relative;
  width: 100%; }
html, body {
   height: 100%;
   font-family:Arial, Helvetica, sans-serif;
}
body {
   padding: 0px;
   background: url(web_bknd.jpg) no-repeat;
}
 
RandomBrad replied on at Permalink Reply
RandomBrad
I don't think an image is going to dynamically scale with the browser window. I would just use a larger background image or work with repeating it.
jeckerman replied on at Permalink Reply
jeckerman
Or avoid it all together. It can be done, but then you have to add all the logic to keep the aspect ratio somewhat in check. Is it a complicated image? Or a pattern?

- Josh
RandomBrad replied on at Permalink Reply
RandomBrad
Yeah, outside normal CSS you can. I'd agree to stay away from it. Are you talking about a page like groupon with a large image in the background? That's a big image for the guy on the 30" monitor! :)
wilwaldon replied on at Permalink Reply
wilwaldon
Outside of regular CSS you can use this nifty jQuery plugin to accomplish the effect you're looking for.

http://johnpatrickgiven.com/jquery/background-resize/...

It's pretty easy to use and will give you what you need with a small footprint.
Remo replied on at Permalink Reply
Remo
please don't double post:
http://www.concrete5.org/community/forums/customizing_c5/fit-to-bro...