8 Replies Latest reply: Aug 18, 2012 4:38 PM by profstyle RSS

    Content offsetting from background after browser window resize


      Hello all and to those that can help me solve the issue im having as i am relatively new to the web developing scene,


      Now for the website i am developing i have a background that is 830px wide, centered and coloured.


      The content for the several pages fits inside a div with with its width set to 750px wide with margins set to auto which positions the div in the centre of the background image.


      All this works as i want it to until the browser windows width is reduced to less than that of the 830px's of the background, which seems to shift the background over to the left, giving me whitespace on the right and offsetting my content from the background as shown in these screen shots:


      Screen Shot 2012-03-25 at 21.17.53.png

         Browser with maximised window.


      Screen Shot 2012-03-25 at 21.18.34.png

         Broswer resized horizontally.


      Any help as to why this is happening and how i can resolve it will be hugely appreciated.


      I understand my coding may be a little messy to some of you guys as this is the first site ive ever built, but to those that can make something out of it my html and css is as followed:








      @charset "UTF-8"; body {           background-image: url(Images/bg.png);           background-position: center;           background-repeat: repeat-y;           background-attachment: scroll; } #Container {           margin-right: auto;           margin-left: auto;           width: 750px;           padding-top: 0px;           padding-bottom: 0px;           text-align: left; } #twitter_icon img {           margin-left: 10px; } #flag_icon img {           margin-top: 10px; } #logo_icon img {           margin-top: 3px;           margin-right: 10px;           margin-bottom: 0px;           margin-left: 0px; } #top_menu {           font-family: "Bebas Neue"; } #bottom_menu {           font-family: "Bebas Neue";           float: none; } #copyright_text {           text-align: right;           font-size: 10px;           font-family: Arial;           margin-top: 60px; }
        • 1. Re: Content offsetting from background after browser window resize
          John Waller MVP

          Please upload your problem page and post a link here so we can view it in our browsers.


          Much easier to troubleshoot then.

          • 2. Re: Content offsetting from background after browser window resize
            JimminyJamie Community Member

            The site isnt uploaded to the web as of yet.


            I can do so if you provide instructions

            • 3. Re: Content offsetting from background after browser window resize
              JimminyJamie Community Member

              Also the html code doesnt appear to be displaying correctly so here it is again:





              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

              <html xmlns="http://www.w3.org/1999/xhtml">


              <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

              <title>House of Mind</title>

              <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

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

              <script type="text/javascript">

              function MM_preloadImages() { //v3.0

                var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

                  var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

                  if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}


              function MM_swapImgRestore() { //v3.0

                var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;


              function MM_findObj(n, d) { //v4.01

                var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

                  d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

                if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

                for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

                if(!x && d.getElementById) x=d.getElementById(n); return x;




              function MM_swapImage() { //v3.0

                var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

                 if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}



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

              <link href="House of Mind layout.css" rel="stylesheet" type="text/css" />




              <body onload="MM_preloadImages('Images/basket icon white.png')">

              <div id="Container">

                <div id="logo_image">

                  <div id="twitter_icon"><a href="http://twitter.com/#!/HouseOfMindUK" target="_blank"><img src="Images/twitter button.png" alt="Twitter" width="31" height="31" align="right" /></a></div>

                  <div id="fb_icon"><a href="http://www.facebook.com/houseofmindclothing" target="_blank"><img src="Images/Facebook button.png" alt="Facebook" width="31" height="31" align="right" /></a></div>

                <img src="Images/House of Mind.png" width="256" height="164" alt="House of Mind" /> </div>

                <div id="top_menu">

              <ul id="MenuBar1" class="MenuBarHorizontal">

                <li><a href="basket.html" title="View Basket" onmouseover="MM_swapImage('Basket','','Images/basket icon white.png',1)" onmouseout="MM_swapImgRestore()">Basket <img src="Images/basket icon.png" alt="View Basket" name="Basket" width="25" height="22" border="0" align="top" id="Basket" /></a></li>

                <li><a href="shop.html" title="Shop">Shop</a></li>

              <li><a href="about.html" title="About">About</a></li>

              <li><a href="#" title="Home">Home</a></li>


                <div id="top_line"><img src="Images/white line.jpg" width="750" height="3" /></div>


                <div id="index_content">

                <p><img src="Images/Home content 1.jpg" width="750" height="550" /></p></div>

                <div id="bottom_menu">

                <div id="bottom_line"><img src="Images/white line.jpg" width="750" height="3" /></div>

              <ul id="MenuBar2" class="MenuBarHorizontal2">

                <li><a href="info.html" title="Info">Info</a></li>

                <li><a href="news.html" title="News">News</a></li>

                <li><a href="contact.html" title="Contact Us">Contact Us</a></li>

                <li><a href="login.html" title="Register/Login">Register/Login</a></li>


                <div id="flag_icon"><img src="Images/flag icon.png" width="33" height="19" align="right" /></div>

                <div id="logo_icon"><img src="Images/logo icon.png" width="35" height="32" align="right"/></div>


                <div id="copyright_text">

                  <p>© 2012. House of Mind, All Rights Reserved</p>



              <script type="text/javascript">

              var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

              var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});








              @charset "UTF-8";

              body {

                        background-image: url(Images/bg.png);

                        background-position: center;

                        background-repeat: repeat-y;

                        background-attachment: scroll;




              #Container {

                        margin-right: auto;

                        margin-left: auto;

                        width: 750px;

                        padding-top: 0px;

                        padding-bottom: 0px;

                        text-align: left;


              #twitter_icon img {

                        margin-left: 10px;


              #flag_icon img {

                        margin-top: 10px;


              #logo_icon img {

                        margin-top: 3px;

                        margin-right: 10px;

                        margin-bottom: 0px;

                        margin-left: 0px;


              #top_menu {

                        font-family: "Bebas Neue";


              #bottom_menu {

                        font-family: "Bebas Neue";

                        float: none;


              #copyright_text {

                        text-align: right;

                        font-size: 10px;

                        font-family: Arial;

                        margin-top: 60px;


              • 4. Re: Content offsetting from background after browser window resize
                Nancy O. MVP

                Do you have a web hosting account yet?  When your hosting space is set-up, your web host will send you details on how to connect to your server space.  You need that information to enter into DW.


                Setting Up Local & Remote site folders (CS5 & CS5.5)

                http://help.adobe.com/en_US/dreamweaver/cs/using/WS753df6af718a350a60097e0f131686fa2b4-7ff e.html



                Nancy O.

                Alt-Web Design & Publishing

                Web | Graphics | Print | Media  Specialists 


                • 5. Re: Content offsetting from background after browser window resize
                  JimminyJamie Community Member

                  could you recommend a free web host just for the purpose of showing my page to you?

                  • 6. Re: Content offsetting from background after browser window resize
                    Nancy O. MVP

                    If your ISP gives you a free web space, use that.


                    Free web Hosting




                    Nancy O.

                    • 7. Re: Content offsetting from background after browser window resize
                      JimminyJamie Community Member

                      Right, thanks for the help! got that all sorted, here it is: