Skip navigation
enajane
Currently Being Moderated

Fuid grid background image

Feb 22, 2013 2:52 PM

On a fluid grid layout, can I have an overall background that scales with the browser window?

Having it scale rather than repeat?

 
Replies
  • Currently Being Moderated
    Feb 22, 2013 3:29 PM   in reply to enajane

    You mean like this?

    http://alt-web.com/TEST/Resizable-BG.shtml

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 25, 2013 8:19 AM   in reply to enajane

    I recommend creating a separate external CSS file for your content styles.  Boilerplate is a reset CSS.  Respond is a JavaScript so you can't put CSS styles there.  And abcresponsive.css appears to be your FluidGrid Layout which is for layout only.

     

     

    Nancy O.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 15, 2013 1:45 AM   in reply to enajane

    @enajane, can you upload your files to a webserver and give us a link?

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 17, 2013 10:56 PM   in reply to enajane
    • apDivs is very bad practice. Use relatively positioned divs and use floats to achieve the positioning you want
    • You may want to consider wrapping your content container within a div to horizontal center by using margin: 0 auto;
    • And your content itself is not fluid. Is that how you want it or do you want it to be responsive?
     
    |
    Mark as:
  • Currently Being Moderated
    Mar 18, 2013 10:29 AM   in reply to enajane

    Working with HTML & CSS code is essential. You must learn the basics before you can build quality web sites.  APDivs are not going to work well for you and will ultimately cause you more headaches than you realize.  Here's why:

    http://www.apptools.com/examples/pagelayout101.php

     

    HTML & CSS Tutorials - http://w3schools.com/

     

    Learn CSS positioning in 10 steps

    http://www.barelyfitz.com/screencast/html-training/css/positioning/

     

    CSS Floats & Margins:

    http://alt-web.com/DEMOS/3-CSS-boxes.shtml

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 18, 2013 12:24 PM   in reply to enajane

    After looking at your page I can say that you can be created quickly using fluid grids.

    Can you please provide more details on what you were not able to achieve using Fluid Grids ?

     

    Here are few pointers:

    1) Create a blank CSS called Styles.css

    2) Create a new FG page

    3) While creating the page browse to style.css and attach the same.

    4) Add css for background image in style.css.

    5) now add a header. Add a figure tag inside it followed by a Navigation tag

    6) Place your first image in This figure tag

    7) Reduce it to 2 column size and Add 2 column margin to it

    8) Place UL and LI inside our nav

    9) Use CSS to create menu

    10) Add a section tag after header

    11) Add a Div and a figure tag in it to create next portion of site.

     

    Hope it helps

     
    |
    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