Grow your CSS skills. Land your dream job.

background images

  • # September 26, 2009 at 3:11 pm

    Hi ,
    I would be great if someone could help me out with a little issue I have.
    I am trying to get the background of this page http://www.accommodationgateway.com.au/nsw/
    to look like this http://www.accommodationgateway.com.au/

    As the style sheet are different it is working for one but not the other.

    The page http://www.accommodationgateway.com.au/nsw/ is not showing backgroung to the whole of page but is repeating.

    On the page that is working I put this code into the actual page:
    <div id="deco">

    <div class="hilite"></div>

    <img src="img/water.jpg" alt="" width="1" height="1" />

    not via a style sheet and it works if I do the same with the other page it totally will not work so i have put the image in the style sheet, now I need to get it to cover the whole page.
    This is the code i have used in the style sheet:
    /* @group defaults */

    html,
    body {
    margin: 0;
    padding: 0;
    background: url(/img/water.jpg);
    height: 1px;
    width: 1px
    position: absolute;

    }

    /* @group deco */

    #deco {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    }

    #deco .hilite {
    background: url(../img/bubble-hilite.png) 0 0 no-repeat;
    height: 2660px;
    position: absolute;
    right: 3%;
    top: 5%;
    width: 1800px;
    z-index: 1;

    }

    #deco img {
    display: block;

    height: 100%;
    position: fixed;
    width: 100%;
    }

    /* @endgroup */
    The final thing I might add is that the page I am trying to fix has 2 style sheets.
    /css/style.css
    /style.css

    Any help would be great thankyou.

    Toni

    # October 1, 2009 at 2:18 am

    Hello,

    Please try the following steps,
    1. <div id="deco">
    <img height="1" width="1" alt="" src="img/water.jpg"/>
    </div>
    2. #deco {
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
    }
    3. #deco img {
    display:block;
    height:100%;
    position:fixed;
    width:100%;
    }

    Please try this, if you have any other doubts means,
    please open this site(http://www.accommodationgateway.com.au/index.htm) in the firefox browser,
    Then inspect the site using firebug, you can able to see the css coding and html coding.

    Thanks & Regards

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".