Skip navigation
vincentccw
vincentccw
Currently Being Moderated

div background image out of place?

Apr 12, 2012 11:48 PM

Tags: #background #image #html #css

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. =)

1277 Views   9 Replies   Latest reply: vincentccw, Apr 15, 2012 11:05 AM
 
Replies
  • osgood_
    Currently Being Moderated
    1. osgood_,
    Apr 13, 2012 12:22 AM   in reply to vincentccw
    Report

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

     
    |
    Mark as:
  • vincentccw
    Currently Being Moderated
    2. vincentccw,
    Apr 13, 2012 12:31 AM   in reply to osgood_
    Report

    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.

     
    |
    Mark as:
  • vincentccw
    Currently Being Moderated
    3. vincentccw,
    Apr 13, 2012 12:50 AM   in reply to vincentccw
    Report

    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;

    }

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

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

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    4. osgood_,
    Apr 13, 2012 1:25 AM   in reply to vincentccw
    Report

    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.

     
    |
    Mark as:
  • vincentccw
    Currently Being Moderated
    5. vincentccw,
    Apr 13, 2012 4:31 AM   in reply to osgood_
    Report

    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

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    6. osgood_,
    Apr 13, 2012 4:48 AM   in reply to vincentccw
    Report

    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;

    }

     
    |
    Mark as:
  • vincentccw
    Currently Being Moderated
    7. vincentccw,
    Apr 13, 2012 5:35 AM   in reply to osgood_
    Report

    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

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    8. osgood_,
    Apr 13, 2012 5:44 AM   in reply to vincentccw
    Report

    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 */

    }

     
    |
    Mark as:
  • vincentccw
    Currently Being Moderated
    9. vincentccw,
    Apr 15, 2012 11:05 AM   in reply to osgood_
    Report

    thanks it works now, =)

     
    |
    Mark as:
Actions

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