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

 
Replies
  • Currently Being Moderated
    Apr 13, 2012 12:22 AM   in reply to vincentccw

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

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

    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:
  • Currently Being Moderated
    Apr 13, 2012 4:48 AM   in reply to vincentccw

    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:
  • Currently Being Moderated
    Apr 13, 2012 5:44 AM   in reply to vincentccw

    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:

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