October 4th, 2012, 06:39 AM
CSS Background Design Help
Recently I have came up with a CSS idea for one of my live casino sites, basically i wanted a live dealer to stand side to side of the main wrapper. I have done so here: http://www.livecasino.co.uk/
But does anyone know a way for when the screen size shrinks, the image shrinks with it too? Please let me know, would be a big help and fix as my screen at home and work are alot larger than normal screens!
October 5th, 2012, 04:19 PM
There are methods using only CSS, by not using the image as a CSS background, but as an actual <img>-tag and then setting the width to 100% and it'll auto resize (when the parent <div> is 100% width, of course). However, this will also shrink them in height.
If you don't want that, you might want to consider splitting the image in half and then have two <div>s floated to either side in a 100% width parent <div>. On resize they would move closer together, without shrinking in size.
Or if you don't want it fluid you could use breakpoints in you CSS, changing the width of the background image when the screen is a set width.
October 10th, 2012, 06:16 AM
Thanks mate, much appreciated! I'll be testing out that method once i have the spare time again!