Home › Forums › CSS › Full Screen Background Image › Re: Full Screen Background Image
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
$(window).resize(function(){
var w = $('#solid').width(); var left = ((w - $('#page-wrap').width() ) / 2 -40) * -1;
$('#blurry') .width(w) .css('left', left);
});
$(document).ready(function(){ $(window).trigger('resize'); });