9 Replies Latest reply: Apr 15, 2012 11:05 AM by vincentccw RSS

    div background image out of place?

    vincentccw Community Member

      below is the link to my test page:

      http://nandigital.com/test/about.html

      http://nandigital.com/test/include/style.css (I have also make comments on what each part of the css does)

       

      I am trying to build a website from scratch, which consist of a fix background image and 2 div background images sitting in the middle (since html doesn't allow me to add multiple background in the body...).

       

      It has been tested latest version of IE, firefox and chomre, and on different screen resolution, all properly rendered.

      But as soon as I try to resize the window the background image break and repeating background no loner working....like this

      12-04-2012 14-41-59.jpg

       

      Any advice please help and thanks in advance. =)

        • 1. Re: div background image out of place?
          osgood_ CommunityMVP

          Seems to work ok in Firefox and Safari on Mac........maybe you have fixed the issue?

          • 2. Re: div background image out of place?
            vincentccw Community Member

            not yet, may be it works on Mac i guess, I try it on pc, it looks fine when view in full/resize slightly in browser, but when i reduce the width of my browser window more and more the background image will offset more and more and the repeating background also stops.

            • 3. Re: div background image out of place?
              vincentccw Community Member

              I just realize that the setting left 50% and margin-left:-650px; to centralize elements create problems  for those monitor screen who is lesser then 1300px...

               

              anyone has a better workaround for this problem? Thanks

               

              ////////////////////////////////////////////////////////////////////////////////////

               

              #redTitleBackground{

                        background:url(../images/red-about-background.jpg);

                        height:149px;

                        width:1300px;

                        z-index:1;

                        position:absolute;

                        top:153px;

                        left:50%;

                        margin-left:-650px;

              }

              ///////////////////////////////////////////////

              ///////////////////////////////////////////////////////////////////////////////////

              • 4. Re: div background image out of place?
                osgood_ CommunityMVP

                Problem is its all build with a bunch of absolutely positioned <divs> which makes anything awkard to manipulate. Your best bet unless you want to decontruct and reconstruct the page properly is to use a repeating background image on the <body> tag and then try and line the other image which contains the title up with it.

                • 5. Re: div background image out of place?
                  vincentccw Community Member

                  Hi, I have updated the file, i have made some reconstruction and the background image is now fixed, but i still have 1 more problem left, since i already have a none-repeat background on the <body> tag, it doest not allow me to add 1more (which is the repeating red color bar), how should I overcome this? Thanks

                   

                  http://nandigital.com/test/about2.html

                  • 6. Re: div background image out of place?
                    osgood_ CommunityMVP

                    vincentccw wrote:

                     

                    Hi, I have updated the file, i have made some reconstruction and the background image is now fixed, but i still have 1 more problem left, since i already have a none-repeat background on the <body> tag, it doest not allow me to add 1more (which is the repeating red color bar), how should I overcome this? Thanks

                     

                    http://nandigital.com/test/about2.html

                     

                    Wrap your 'outerContainer' <div> in its own <div> and apply the red horizontal repeating background to that. That looks like that will work if you get the repeating image positioned accurately.

                     

                    You'll probably also need to add margin: 0; padding: 0; to get rid of the white margin around the border of the browser window. (see below)

                     

                    body{

                        height: 100%;/*for stretching background*/

                        font-family:Arial, Helvetica, sans-serif;

                        background:url(../images/pattern-background.jpg);

                        background-repeat:no-repeat;

                        background-attachment: fixed;

                        background-position:bottom;

                        margin: 0;

                        padding: 0;

                    }

                    • 7. Re: div background image out of place?
                      vincentccw Community Member

                      Thanks, i did what you said and wrap #outerContainer <div> within a new div within the #redRepeatBackground <div>, the background did manage to repeat upon resizing the browser window....

                       

                      /////////////////////////////////////////////////////////////////////////

                      #redRepeatBackground{

                                background:url(../images/red-background.png);

                                background-repeat:repeat-x;

                                height:149px;

                                min-width:100%;

                                z-index:-2;

                                position:absolute;

                                top:153px;

                                left:0;

                      }

                      ////////////////////////////////////////////////////////////////////

                       

                       

                      but there i face another problem, the whole website got push down, what should i do?

                       

                      12-04-2012 20-32-28.jpg

                      • 8. Re: div background image out of place?
                        osgood_ CommunityMVP

                        Sounds like you're doing it incorrectly. The new <div> should completely wrap the  'outerContainer' (see below).

                         

                         

                        <body>

                        <div id="pageWrapper">

                            <div id="outerContainer">

                         

                         

                        </div><!--end outerContainer-->

                        </div><!--end pageWrapper -->

                            </body>

                         

                         

                        Delete the below before the closing </body> tag you don't need it.

                         

                        <div id="redRepeatBackground"></div>

                            <!--<div style="position:absolute; top:0;"><img src="images/red-background.png" width="4" height="149" border="0" style="" /></div>-->

                         

                         

                         

                        Then apply the repeating background:

                         

                         

                        #pageWrapper {

                        background:url(../images/red-background.png);

                        background-repeat:repeat-x;

                        background-position: 100px 0; /* use background-position to place the image where it needs to be */

                        }

                        • 9. Re: div background image out of place?
                          vincentccw Community Member

                          thanks it works now, =)