#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Location
    London
    Posts
    21
    Rep Power
    0

    CSS Background Design Help


    Hello guys,

    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!

    Cheers,
    Sam
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Location
    Hannover, Germany
    Posts
    11
    Rep Power
    0
    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.

    If you need even more control you could always resort to JavaScript, although I think one of the CSS methods should work just fine here (I like the second one )
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Location
    London
    Posts
    21
    Rep Power
    0
    Thanks mate, much appreciated! I'll be testing out that method once i have the spare time again!

    Cheers,
    Sam

IMN logo majestic logo threadwatch logo seochat tools logo