Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Full Screen Background Image

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #26256

    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
    https://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; }

    #64834
    iam_dbo
    Member

    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:




      Flexible blurry background



      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




    #64848

    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)
  • The forum ‘CSS’ is closed to new topics and replies.