Skip navigation
Currently Being Moderated

placing a background image in fluid grid layout

Jan 15, 2014 4:34 PM

Tags: #template #mobile #html5 #fluid

I am having trouble building a fluid grid layout  I am not sure why but when I shrink the layout it doesn't seem to work correctly
I need to do 2 things.

 

1) make the background image shrink as it is suppossd to. when you scale down the images doesn't shirink to tablet size and isn't there for the phone size (although I think I want a new image for phone with just one side of the (page image). on it so I assume I just link that in there under that section in in the css

 

2)It doesn't seem to want to align the writing so that it is only over the page section of the background image on each side (the rightcontent and left content boxes-ie they should look like text on a page)

 

also I want to take the page here when it is finished and make it a template for further pages (just changing the text) is that done the same as usual for the fluid grids?

 

 

Thank you in advance for the help

Here is the link that the site has been temp posted on for detail editing. 

 

http://approvalsite.info/

 
Replies
  • Currently Being Moderated
    Jan 15, 2014 4:51 PM   in reply to jsmcrawler

    Background pictures don't resize.  Use CSS gradients.  They load quicker and re-scale in fluid layouts.

    http://www.colorzilla.com/gradient-editor/

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 15, 2014 7:49 PM   in reply to jsmcrawler

    If you must scale a background image then put it in a separate div tang as an image and position the div for the rest of your elements relative or absolute to the div with the image. I hope that made sense, I'm posting from a mobile device.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 16, 2014 11:23 AM   in reply to jsmcrawler

    Your current design scheme isn't conducive to  Fluid Layouts.  Either re-think your design concept or switch to widths in pixels. You can then establish different breakpoints and background images inside your media queries for mobile, tablet and desktop. 

     

    /**MOBILE**/

    .gridContainer {

    width: 480px;

    background:url(small_BG.jpg) no-repeat;

    }

     

    /**TABLET**/

    .gridContainer {

    width: 700px;

    background:url(medium_BG.jpg) no-repeat;

    }

     

    /**DESKTOP**/

    .gridContainer {

    width: 960px;

    background:url(large_BG.jpg) no-repeat;

    }

     

    The result is an adaptive rather than responsive layout.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 25, 2014 11:07 AM   in reply to jsmcrawler

    jsmcrawler wrote:

     

    What about it is not conducive to a fluid layout?

    Background pictures don't re-scale with % width layouts.  Some things won't look right as viewport changes and background disappears from view.

     

     

    Nancy O.

     
    |
    Mark as:

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