Skip navigation
JeffKershner
JeffKershner Calculating status...
Currently Being Moderated

Fluid Grid with a Banner Image

Aug 4, 2012 6:41 PM

Tags: #fluid_grids

The default widths are 0-480px for mobile, 481-768 for tablet and 769-1232 for desktop in pixels.

 

If my design calls for a large banner image, how do I deal with this for each device?

 

For example, for desktop, my large banner image is 940 px wide.  I can get my banner image to center for any size larger than 940, but for less than 940, the banner image is clipped.

 

Should I create the banner images for the smallest size of each device type?  If I do that, then in the desktop view, my banner image will be only 769px wide centered on a possible largest browser width of 1232!

 

How should I handle this?

--Jeff

772 Views   7 Replies   Latest reply: RobertoBlake, Aug 23, 2012 8:18 AM
 
Replies
  • osgood_
    Currently Being Moderated
    1. osgood_,
    Aug 4, 2012 11:43 PM   in reply to JeffKershner
    Report

    Set the width of the image at 100%. Then it will adjust to the device screen size.

     

     

    See example:

    http://webdesignerwall.com/tutorials/responsive-design-with-css3-media -queries

     
    |
    Mark as:
  • JeffKershner
    Currently Being Moderated
    2. JeffKershner,
    Aug 5, 2012 12:03 AM   in reply to osgood_
    Report

    Is there a way to do this where the banner image is not an image tag but rather a background image property in css?

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    3. osgood_,
    Aug 5, 2012 12:39 AM   in reply to JeffKershner
    Report

    Not so the 'whole' of the image can be viewed as the the device screen is narrowed.

     

    You  can create three different sized background images and center those by changing the css as the device viewport gets narrower.

     

    Mobile adaptation is still fairly new and I guess its a bit give and take at the moment. It will change the way we think about constructing sites over the next few years. I expect to see a lot more sites atempting to address the mobile issue but the design will be compromised intially until the solutions become more advanced

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    4. osgood_,
    Aug 5, 2012 12:48 AM   in reply to osgood_
    Report

    Hang on I may be wrong.

     

    I'm just researching - background-size: auto;

     

    But I don't know what browsers it is supported in

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    5. osgood_,
    Aug 5, 2012 1:05 AM   in reply to osgood_
    Report

    Try adding to your background image css - background-size:100%;

     

    It works in Firefox but at this stage I'm not sure what other browsers or devices support it.

     

     

    It works in the following browsers:

     

    The background-size property is supported in IE9+, Firefox 4+, Opera, Chrome, and Safari 5+.

     

    But I think some mobiles devices will not support the property.

     

    IE7 and 8 will ignore it but you don't really need to have an 'adaptable' solution for those two browsers.

     
    |
    Mark as:
  • jpost-design
    Currently Being Moderated
    6. jpost-design,
    Aug 21, 2012 12:46 PM   in reply to osgood_
    Report

    A great place to check for browser support is the W3C schools site. Has lots of mini tutorials and examples on how to use idfferent properties. The background-size page is http://www.w3schools.com/cssref/css3_pr_background-size.asp and has notes for different browser support, properties, and other variables you can set.

     
    |
    Mark as:
  • RobertoBlake
    Currently Being Moderated
    7. RobertoBlake,
    Aug 23, 2012 8:18 AM   in reply to JeffKershner
    Report

    I would make the different divs that contain the banner and control their visibility based on the @media queries or conversly you could utilize a different sized image altogether depending on the media queries.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points