Responsive background images?

HTML & CSS
1

hi there,
Does anyone know about responsive background images + making them smaller for different sizes?

URL:http://www.bluecrushdesign.co.za/mocality/bamboo/home.html

  • the prices (ksh 80,000) are on a background image (green banner)

  • I want to try make that green banner squeeze down depending on the browser size

  • if you look at this page at 1024px and at 800px you will see what i mean

  • ive tried various things on the net - ie background cover i just cant get anything to work :frowning:

  • its the .priceoverlay in the CSS that holds this background image

2

Yeah, with CSS3 this may be possible, but cross browser support is lacking. TBH, I would think differently about this. I would keep the boxes the same size, and just let them drop as the screen becomes too narrow. You have that anyway, so why let the boxes themselves resize? It’s just asking for trouble.

3

asking for trouble?
Thats responsive design, using % and making content boxes smaller.
Obviously i wouldnt be asking how to do this if we were keeping the boxes the same size…

“Yeah, with CSS3 this may be possible”

Ok, so does anyone know how, thats why I am here :wink:

4

Ha ha, yes, I just meant that it’s a problem you don’t need to have. When I have smallish boxes like that on a responsive design, I just leave the boxes at one size and let them drop when needed, or just become full width when the screen gets very narrow. Much easier.

I’m not up to speed with the best CSS3 solution, but this will also introduce the problem that some major browsers won’t support it, so you’ll be stuck with that dilemma too.

Anyhow, I’ll get out of the way and leave space for the CSS3 experts. I was just trying to save you some hassles by offering another perspective. :slight_smile: