Grow your CSS skills. Land your dream job.

Full Screen Background Image

  • # September 27, 2009 at 1:26 am

    Greetings,

    Using

    I am attempting to have the top blured section stay centred on the page and the background image completely fill the width of the browser window. If you resize the browser window to the width of the background image you get the effect I am after.
    However I would like the background to grow to the full width of the browser window.

    http://www.its.co.nz/demo/ to view where I am up to.

    Thank you for your time and assistance.
    SC

    Code:
    /*
    CSS-Tricks Example
    by Chris Coyier

    http://css-tricks.com

    */

    * { margin: 0; padding: 0; }
    body { font: 15px Cambria, Serif;
    background: url(images/bg-solid.jpg) no-repeat fixed; }

    h1 { font: 36px Georgia, Serif; }

    #page-wrap { width: 450px; margin: 80px auto;
    background: url(images/bg-blurry.jpg) no-repeat fixed;
    border: 5px solid white; padding: 40px;
    min-height: 400px;
    -moz-border-radius: 30px; -webkit-border-radius: 30px; }

    # September 29, 2009 at 2:31 pm

    Hey southerncross,

    interesting, I think I managed something…

    IMO it won’t work with background-image as you can’t define any width information for them.

    I defined the images in img-tags.

    • The solid one just has a width of 100%.[/*:m]
    • The is absolutly positioned in the page-wrap, its width is defined with a little jquery-logic and the window-resize event. [/*:m][/list:u]

      I hope this works for you.

      David

      The HTML:

      Code:
      < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">




      House Demo Page

      New Housen

       

      Home | Page 1 | Page 2 | Page 3 | Contact Us

       

       

      This is where the text will go. This is where the text will go. This is where the text will go. This is where the text will go. This is where the text will go. This is where the text will go.

       

      This is where the text will go. This is where the text will go. This is where the text will go. This is where the text will go. This is where the text will go. This is where the text will go

       

      This is where the text will go. This is where the text will go. This is where the text will go. This is where the text will go. This is where the text will go. This is where the text will go

       

      This is where the text will go. This is where the text will go. This is where the text will go. This is where the text will go. This is where the text will go. This is where the text will go




    # September 29, 2009 at 10:08 pm

    Thank you very much David. Looks like you have done quite a bit here. I have been playing around with the

    Code:
    #img.source-image {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    }

    from the http://css-tricks.com/how-to-resizeable-background-image/ page.
    I feel rather guilty to say that it is not quite what I am after as I would like the blured image ontop on the background to match up with the background when it moves as it does in the original tutorial page.

    I take you comment that it is probably not going to work. Thank you very much for your input and time.
    Cheers SC

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

You must be logged in to reply to this topic.

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