7 Replies Latest reply: Jan 25, 2014 11:07 AM by Nancy O. RSS

    placing a background image in fluid grid layout

    jsmcrawler Community Member

      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/

        • 1. Re: placing a background image in fluid grid layout
          Nancy O. MVP

          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.

          • 2. Re: placing a background image in fluid grid layout
            jsmcrawler Community Member

            Ok sounds good. How do I do that for an image-I don't want a gradient of colors I want the image that displays on the site. althought that tool is a really good tool so thank you for that I am sure I can use it on another site.

            http://approvalsite.info/

             

             

            I found this

            http://css-tricks.com/perfect-full-page-background-image/

            It seems to work kinda.

            I tried the very  first way that was there.

            • 3. Re: placing a background image in fluid grid layout
              Rick Gerard MVP

              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.

              • 4. Re: placing a background image in fluid grid layout
                jsmcrawler Community Member

                Kind of makes sense.

                I am not sure how to make the div tag layouts relative to the background image.

                please advise.

                 

                 

                also, I have been playing with it and it seems to be working better now.

                But the issue I have with it now is that the image on the right side of the page keeps showing at the bottom of the page instead of on the top of the page directly next to the wording on the left.

                does anyone know why?

                I am sure it is just a simple coding issue.

                help

                 

                 

                approvalsite.info

                 

                 

                CSS:

                 

                @charset "utf-8";

                /* Simple fluid media

                   Note: Fluid media requires that you remove the media's height and width attributes from the HTML

                   http://www.alistapart.com/articles/fluid-images/

                */

                img, object, embed, video {

                    max-width: 100%;   

                }

                /* IE 6 does not support max-width so default to width 100% */

                .ie6 img {

                    width: 100%;

                }

                 

                /*

                    Dreamweaver Fluid Grid Properties

                    ----------------------------------

                    dw-num-cols-mobile:        5;

                    dw-num-cols-tablet:        8;

                    dw-num-cols-desktop:    12;

                    dw-gutter-percentage:    25;

                   

                    Inspiration from "Responsive Web Design" by Ethan Marcotte

                    http://www.alistapart.com/articles/responsive-web-design

                   

                    and Golden Grid System by Joni Korpi

                    http://goldengridsystem.com/

                */

                 

                /* Mobile Layout: 480px and below. */

                 

                .gridContainer {

                    width: 85%;

                    padding-left: 1.82%;

                    padding-right: 1.82%;

                    background: url(../images/DSC_0014.jpg) center fixed;

                    -webkit-background-size: cover;

                      -moz-background-size: cover;

                      -o-background-size: cover;

                      -background-size: cover;

                }

                #LayoutDiv1 {

                    clear: both;

                    float: left;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                }

                #header {

                    clear: both;

                    float: left;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                }

                #menubar {

                    clear: both;

                    float: left;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                }

                #leftcontent {

                    clear: both;

                    float: left;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                    height:auto;

                }

                #rightcontent {

                    clear: both;

                    float: right;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                    height:auto;

                }

                #footer {

                    clear: both;

                    float: left;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                }

                 

                /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

                 

                @media only screen and (min-width: 481px) {

                .gridContainer {

                    width: 90.675%;

                    padding-left: 1.1625%;

                    padding-right: 1.1625%;

                    background: url(../images/DSC_0013.jpg) no-repeat center center fixed;

                      -webkit-background-size: cover;

                      -moz-background-size: cover;

                      -o-background-size: cover;

                      -background-size: cover;

                }

                #LayoutDiv1 {

                    clear: both;

                    float: left;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                }

                #header {

                    clear: both;

                    float: left;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                }

                #menubar {

                    clear: both;

                    float: left;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                }

                #leftcontent {

                    clear: both;

                    float: left;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                }

                #rightcontent {

                    clear: both;

                    float: right;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                }

                #footer {

                    clear: both;

                    float: left;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                }

                }

                 

                /* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

                 

                @media only screen and (min-width: 769px) {

                .gridContainer {

                    width: 90%;

                    max-width: 1232px;

                    padding-left: 0.75%;

                    padding-right: 0.75%;

                    margin: auto;

                    background: url(../images/DSC_0013.jpg) no-repeat center center fixed;

                      -webkit-background-size: cover;

                      -moz-background-size: cover;

                      -o-background-size: cover;

                      -background-size: cover;

                }

                #LayoutDiv1 {

                    clear: both;

                    float: left;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                }

                #header {

                    clear: both;

                    float: left;

                    margin-left: 5%;

                    width: 100%;

                    display: block;

                }

                #menubar {

                    clear: both;

                    float: left;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                }

                #leftcontent {

                    clear: both;

                    float: left;

                    margin-left: 15%;

                    width: 30%;

                    display: block;

                    padding-right: 2%;

                }

                #rightcontent {

                    clear: none;

                    float: right;

                    margin-left: 1%;

                    width: 49%;

                    display: block;

                    margin-right: 8%;

                }

                #footer {

                    clear: both;

                    float: left;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                }

                 

                 

                }

                 

                 

                HTML

                 

                <!doctype html>

                <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->

                <!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->

                <!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->

                <!--[if gt IE 8]><!-->

                <html class="">

                <!--<![endif]-->

                <head>

                <meta charset="utf-8">

                <meta name="viewport" content="width=device-width, initial-scale=1">

                <title>Untitled Document</title>

                <link href="boilerplate.css" rel="stylesheet" type="text/css">

                <link href="_css/layout.css" rel="stylesheet" type="text/css">

                <!--

                To learn more about the conditional comments around the html tags at the top of the file:

                paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

                 

                Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):

                * insert the link to your js here

                * remove the link below to the html5shiv

                * add the "no-js" class to the html tags at the top

                * you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build

                -->

                <!--[if lt IE 9]>

                <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>

                <![endif]-->

                <script src="respond.min.js"></script>

                 

                 

                <!-- Start css3menu.com HEAD section -->

                <link rel="stylesheet" href="index_files/css3menu1/style.css" type="text/css" />

                <!-- End css3menu.com HEAD section -->

                 

                </head>

                <body>

                <div class="gridContainer clearfix">

                  <div id="header"><h1>Jan Kardy's Literary Agency</h1></div>

                 

                <div id="menubar">

                <!-- Start css3menu.com BODY section id=1 -->

                <ul id="css3menu1" class="topmenu">

                    <li class="topfirst"><a href="../index.html" style="height:18px;line-height:18px;">Home</a></li>

                    <li class="topmenu"><a href="../about_jankardys.html" style="height:18px;line-height:18px;">About Jan Kardys</a></li>

                    <li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>Resources</span></a>

                    <ul>

                        <li><a href="../Education_connection.html">Education Connection</a></li>

                        <li><a href="../submission_guidelines.html">Submission Guidelines</a></li>

                        <li><a href="#"><span>Blogs</span></a>

                        <ul>

                            <li><a href="http://unicornwritersconferencect.blogspot.com/">Unicorn Writers Conference</a></li>

                            <li><a href="http://advancenetworkingunicorn.blogspot.com/">Advanced Networking Blogs</a></li>

                        </ul></li>

                        <li><a href="../first_steps_to_publishing.html">First Steps to Publishing</a></li>

                        <li><a href="../library_publish_events.html">Library &amp; Publishing Events</a></li>

                        <li><a href="#">Art Gallery</a></li>

                    </ul></li>

                    <li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Clients</a></li>

                    <li class="toplast"><a href="#" style="height:18px;line-height:18px;">Contact Jan Kardys</a></li>

                </ul>

                <p style="display:none"><a href="http://css3menu.com/">Horizontal Menu Using CSS Css3Menu.com</a></p>

                <!-- End css3menu.com BODY section -->

                </div>

                  <div id="leftcontent">

                    <p>Jan   Kardys, President of Black Hawk Literary Agency, has thirty years of   diversified publishing experience for nine major publishing   corporations. Black Hawk Literary Agency LLC represents a broad spectrum   of authors and illustrators, with a focus on new nonfiction and   fiction.  <br />

                    </p>

                    <p>Jan was Director of   Contracts for Warner Books/Little, Brown &amp; Company, Director of   Contracts at Macmillan Publishing Company, Charles Scribner's Sons, and   Contracts Director at Prentice Hall/Simon &amp; Schuster. Ms. Kardys has   worked at Harcourt Brace Jovanovich, Doubleday, Scholastic, Lippincott   &amp; Crowell, Publishers, St. Martin's Press, Conde Nast Publications,   and Google. Beginning a career in editorial, Jan also worked in art and   production in School publishing. Jan held various executive positions in   subsidiary rights, licensing, database design, imaging, royalty   conversions, contracts, copyrights &amp; permissions departments.<br />

                    </p>

                    <p></p>

                  </div>

                    <div id="rightcontent"><p><strong><center>Jan Kardys, Literary Agent<br />

                    Black Hawk Literary Agency, LLC. <br />

                    17 Church Hill Road,<br />Redding, CT 06896</center></strong></p>

                    <p><strong><center>

                      <p><img src="images/jankardys.jpg" alt="jankardys_headshot" /></p>

                      <p>Blog: <a title="http://bookpublishingteacher.blogspot.com" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://bookpublishingteacher.blogspot.com">http: bookpublishingteacher.blogspot.com</a><br />

                      </p>

                      <p>Email: <a href="mailto:SubmissionsJanKardys@gmail.com" title="mailto:SubmissionsJanKardys@gmail.com">SubmissionsJanKardys@gmail.com</a> <br />

                      </p>

                      <p>Phone: 203-938-7405</p>

                    </center></strong></p>

                  </div>

                    <div id="footer"><h6>Webpage designed by Technomage Web Design</h6></div>

                </div>

                 

                 

                </body>

                </html>

                • 5. Re: placing a background image in fluid grid layout
                  Nancy O. MVP

                  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.

                  • 6. Re: placing a background image in fluid grid layout
                    jsmcrawler Community Member

                    What about it is not condusive to a fluid layout?

                    • 7. Re: placing a background image in fluid grid layout
                      Nancy O. MVP

                      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.