Full Screen Background Image

[southerncross99]

Greetings,

Using

Code:

https://css-tricks.com/examples/BlurryBackgroundEffect/

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; }

[iam_dbo]

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:

  
  
  
  
  

  
  
  

  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

  

  
  
  
  

[southerncross99]

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

[Author]

Posts