Mobile Friendly Website

CSSPLAY

Doing it with style

100% background image COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}cssplay.co.uk.

Post a comment


Current posts

temp:-
This effect verry (and verry) brake on work FF 1.0.4
(07.01.2006, 23:39)

Stu:-
temp, why are you using 1.0.4 when 1.5 is now current. It only takes a minute to upgrade.
(08.01.2006, 12:14)

temp:-
Stu, thanks for your advice! Im only resetup my OS and have not times for upgrade my FF. Im upgrade FF certainly! ;-) and comeback for look this!!!!
PS
Thanks for your SUPER Site!!!! ;-)
http://www.cssplay.co.uk
(08.01.2006, 14:08)

Stu:-
temp, it will look even better in v1.5 ;o)
(08.01.2006, 14:20)

temp:-
Yes!!!!!!!! Working on FF 1.5! and scrolling work now ;-)
(10.01.2006, 13:21)

Stu:-
temp, it always pays to keep up to date with your browser ;o) (it is also more secure).
(10.01.2006, 16:22)

L:-
yoz this code cant work on ie in mac. did u noe abt it?
(24.01.2006, 02:33)

Stu:-
L, yp i noe abt it. Not mch wks on ie mac ;o)
(24.01.2006, 08:07)

Andrei:-
The text in the Box on the upper left corner does overflow in IE7B2.
(08.02.2006, 21:47)

MaFt:-
a LOT of slowdown on firefox 1.5... cool script though!
(09.02.2006, 12:46)

one:-
can any body give me the codeding plz ... mail me at one_smbg@yahoo.com
(15.02.2006, 04:30)

Stu:-
one, the css style is in the head of the markup.
Just copy the source code and you will have it all.
(15.02.2006, 20:25)

AJAX:-
VERY slow in FF 1.5.0.1.
(17.02.2006, 20:07)

Anonym:-
this isn't really practical (IMO), it's a rather obvious method but displaying the layout without the css you still are forced to see the background image. sure this is okay if you have a giant rabbit background, but realistically background images are not necessary so related to content (decorative gradients, patterns, etc), so if for example my background were a 3px wide gradient, in a non-css view of the page, the viewer would at some point be presented with a seemingly unnecessary image of a gradient.
this method can also be very easily applied to a div rather than a background (which may be a bit more applicable to real world examples) ... but the fact remains, the background image becomes content, not background, which is (again IMO) not the best practice ... compromising function for form.
(also, width and hieght should be defined ... probably in ems to allow scaling ... right now, in the browsers i've viewed this in (safari and opera), you get unproportioned scaling of the pic)
(18.02.2006, 06:32)

Stu:-
Anonym, who said this was practical? This demo was put up in response to several visitors asking if it could be done. It also may have practical uses in that it can easily be applied to individual divs rather than the whole screen and, of course, should not be used where image distortion would be considered unacceptable.
(18.02.2006, 11:20)

Anonym:-
my bad stu ... didn't know the full background of the original post. perhaps some of my suggestions would be more beneficial to the users who requested the demo in the first place ... at very least they i think they may be some things to consider for anyone wanting to use this demo in a real world scenerio
(18.02.2006, 16:18)

Stu:-
Anonym, no problems, your post might be useful for anyone considering using this method on their web site. Most of my demonstrations have a practical use, some are just for fun and a few are just because it can be done with CSS.
But, hopefully, all can help visitors to learn and appreciate the power of CSS.
(18.02.2006, 16:49)

seecurb:-
pretty rabbit, too!
(08.03.2006, 15:59)

Adair Commodo (BRAZIL):-
Adair Commodo (BRAZIL) -- I Liked... Good!! Congratulations...
(22.03.2006, 19:29)

Diabolist:-
In IE7 this does not scroll well with the mouse wheel. As the scrolling takes place it seems to stop when the cursor reaches a space between the paragraphs.

By the way your site is totally %*&*!! Just discovered it and am gobsmacked :)
(28.03.2006, 01:28)

Marcel Jong:-
Indeed very slow in FireFox 1.5.0.1 :-(

CPU goes to 100% when resizing browser window.
(01.04.2006, 16:03)

nadira:-
I am a beginner! Help please. I placed my background and no matter what i do everything else just goes around it. What am i doing wrong??
(04.04.2006, 20:46)

Peach:-
works great with a gradient background strip.. small file too!!
(08.04.2006, 13:58)

Peach:-
PS. tested fine for me in firfox too.
(08.04.2006, 14:01)

Yoshida:-
I like this thing. It makes CSS more powerfull to me. But after encountering mentioned scrolling problem and some other non-pleasentness I concluded all this is not worth the hassle.
Still a neat CSS application allthesame.
(24.04.2006, 18:57)

Jason:-
Awsome layout man (:
(29.04.2006, 14:44)

DeadMeatGF:-
Who's for a game of "Stretch the Rabbit"?

Great technique, shame it doesn't implement as well as your code deserves!
(08.05.2006, 13:03)

Chris Casey:-
I am a beginner to css and do appreciate your site immensely. I have tried to use this technique to put a 100% background image however everything else on the page is obscured by the image, i.e. it isn't behaving as background. Can you think what I am doing wrong?
(09.05.2006, 13:02)

turbodurso:-
brilliant! shame some browsers just refuse to line -up.
(16.05.2006, 19:46)

therealspike:-
You're one of the CSS king right now! Guess u know it! Keep on the good work!
(17.05.2006, 03:01)

Anonym:-
This site is incredible!
(18.05.2006, 20:41)

Mauricio Samy Silva:-
Hi Stu,
I request your permission to translate to brazilian portuguese the 100% background image tecnique.
Mauricio
\www.maujor.com
(25.05.2006, 16:19)

Stu:-
Hi Mauricio, that's ok, you have my permission.
(26.05.2006, 22:58)

Simon:-
Hi Stu,
Great idea - implemented well. Only one thing I noticed, It seemed to scroll down the page very slowly when I had alot of apps open , most other pages scroll at quite reasonable rates - I guess the graphics processor is getting quite a workout. any comments... Something to consider anyway?.

Simon
Relative newby (8months) but getting better & better everyday with assistance and tips from great sites like your own!
Keep up the great work!
(12.06.2006, 05:40)

cleggy:-
Newbie
Brilliant!!!
(23.06.2006, 06:38)

Steve K:-
Thank You. You are a GREAT help!
(28.06.2006, 14:21)

Ian:-
Wouldn't it be nice if designs with large background images, could make the foreground text layer disappear, giving unrestricted viewing access to the large image.

For example, (a) if the cursor moved onto the side menu (b) there was a "hide" button in the foreground text layer.
(30.06.2006, 10:49)

Carlos:-
Hi

Best css site, by far. I mjst have posted a comment a couple of years ago, when your site and examples made possible to really understand how css works.

Many thanks.
(15.07.2006, 18:04)

Philip:-
I tried implementing this on my myspace page. This is actually an application where it would be helpful. There is a tree at the bottom of the image and I want that to show when people view the page. Any idea how I would get this to work in myspace?
(19.07.2006, 16:34)

Matt:-
this is great! I am designing a site that has a bit of a russian style to it with some strange angles.

Instead of the usual side bar with faux columns I have a slightly angled graphic. I then set the width to be fixed and 100% height. This means that no matter how much content the angle of the image always starts at the and finishes as the same place. - Pretty hard to explain!!

imagine an image that is 300px wide and 300px tall. there is a line going from top to bottom. The top of the line starts at about 150px from the left and ends at the bottom right. when this shrinks and grows in height the line always starts and finishes at the same point - just the angle of the line changes.

Works great but is there a way of stopping it stretch all the way to the end of the body? I have used "Bottom: 40px" which stop it at the bottom but no matter what I try (margin padding etc) the top always goes to the full length of the body.

thanks again!
(21.07.2006, 16:57)

Elena:-
Interesting.

In konqueror 3.5.2 under kubuntu linux, however, the background resizing works, but something breaks scrolling with the mouse wheel. It does work in firefox under the same system.
(23.07.2006, 11:35)

Paul:-
Hi Stu, amazing work! You may want to check the spelling in the title on the "100% Background Image" page. Undoubtedly THE best CSS page I've ever seen. =)
(24.07.2006, 10:21)

SpannerITWks:-
Hi Stu,

Just discovered your www via a link by member caffeinator in my thread here, CSS beats JS 4 safer website design ! - www.dslreports.com/forum/remark,16606221~mode=flat

I quickly tried quite a few of your Exellent demos, and am Very impressed as to what Really can be achieved with CSS.

You might like to comment in the thread, as you know far more about this than i do.

Keep up the good work, all the best, and i wish you every success with spreading the word.

Spanner

SpannerITWks
(31.07.2006, 01:54)

Patrick:-
Stu,

Fantastic! One oddity though... If I shrink the browser (IE 6.0.2) it gets to the point where the left side frame overlays the browser scroll bars and they stop working! Too Funny!!! Never a dull moment with MS :-)

Patrick
(18.08.2006, 00:05)

N°:-
Brilliant, i´ve been searching for a solution to auto-resize my blog-head-background for two days ;) , thanks a lot!
But what do you mean with "works only on 100% x 100% html? It seems to work with every part of the screen! If you like, check on www.enerdency.de ;).
(20.08.2006, 19:07)

John:-
Breath-taking! Have tried to duplicate w/IE6.0 but 700x600px.gif I used does not appear at all. Does it have to be a larger size? A "scalable" picture file? Would appreciate a little more elaboration in the layouts page. Keep wowwing us!
(21.08.2006, 23:11)

Stu:-
John, It will work with any size original image and just stretch to fit. Make sure that the path to the image is correct. If you are using an external style sheet then the path is from the stylesheet location not the xhtml page location.
(21.08.2006, 23:26)

Jesse:-
very nice!
by changing the width to <100% and adding position parameters - ie. top:0; left:46;
you can give it a nice border too.
(22.08.2006, 01:35)

Steve:-
I've been looking for a solution like this one for a long time. You are a genious!!
(22.08.2006, 21:46)

Steve Kundzala:-
Beautiful! The picture I used for this style displays "Blocky". What makes your background picture display so clearly? Are there requirements for the background picture? Wonderful work, thanks!
(23.08.2006, 10:31)

Klaas van Manen:-
Scrolling is VERY slow in this page (using IE6.0 or FF1.0.7, both on Win98SE). How come? Scrolling in your other examples usually goes smooth and fast.
(29.08.2006, 01:21)

Stu:-
Klaas van Manen, probably beacause the image is quite large (file size) and the browsers has to recalculate the ratio and position at each scroll point. This idea can be applied to divs as well as whole screens.
(29.08.2006, 08:03)

klaas van manen:-
Hi Stu,
Thanks for your comment. I'll try the idea on smaller divs. And thanks a lot for this site. I really loved going through all your examples and it helped me an awfull lot in applying CSS to my own site (which is not yet on-line) in quite a short time. I admire your creativity (and your wit). - klaas, from groningen, the netherlands
(30.08.2006, 00:16)

Don V:-
Hey Stu -
Thanks for the great site!
I see the comments on only working with 100x100 - is there no way to get images to resize, yet maintain a locked aspect? I've been trying to find a good "starting" size for images to live in a "basic browser window", but differences in visible toolbars and other browser frame clutter make it a fairly impossible task. Full screen mode works(ish) - but who browses in full screen??
Thanks
Don
(quick note to "L" on the Mac - I've got a keyboard with _all_ the buttons if you'd like it)
(03.09.2006, 06:32)

Anonym:-
Hi stu, I have a little problem. When I use the image auto-resize it does work but all the text and other picture seem to disappear (they get to be behind the "background" picture). Any idea what's going wrong?
(14.09.2006, 14:27)

Omar:-
Hi, is there a way to set the background Image to 100% that it fits whatever screen's size is.
(27.09.2006, 07:07)

Stu:-
Omar, this is 100% of browser window so if your browser fits the screen then the image will fit the screen.
(27.09.2006, 07:48)

Barbara:-
Cudos abound for you! Lots of hard work went into every design and it shows beautifully. I have a project with very little time to put complete. This site has just saved my life and reputation. Thank you.
(25.10.2006, 06:13)

Klash:-
What is this "100% x 100% html" code? Can you tell me about it?. I just want the css code to make my background Image scalable.
(25.10.2006, 11:06)

Klash:-
Here is a piece of my background code,but I want it scalable and in a fixed position like yours example.

Code:

body {
background-image:url();
background-position:Top Left;
width: 100%;
height: 100%;
background-attachment:fixed;
background-repeat:repeat;

}
(25.10.2006, 11:58)

Chris:-
Hi, 1st post here :). After viewing many of CSS sites and coming close, I haven't found code for what I want. I would like to find a way to:

a)have a background image fit horizontally and resize or stretch as resolution changes.
b)have it vertically resize to aspect ratio.
c)centered.

I'm trying to place a background image and prevent stretching and have the full image viewable. I would prefer to have it auto center as well without having to specify placement.

[It's a rectangular image... vertically short and horizontally long. Thanks in advance for any help.
(27.10.2006, 09:48)

Stu:-
Chris, do you mean something like this
www.cssplay.co.uk/layouts/background2.html
(27.10.2006, 19:45)

yogini:-
hi! i m doing a project n i m using a background, i want it bg img to scroll down with the page, can u plz help me!
(04.11.2006, 11:01)

Mizzle:-
@Don V:

It's possible to lock the aspect ratio by setting either width or height to 100% and the other to 'auto'. (Naturally, the results are different, choose the appropriate combination.)

I've tested it in FF (1.5) and IE (6) and it works. From www.w3.org/TR/css3-background/#the-background-size, seems to be documented behaviour, although I did find it quite confusing.

Apparently, 'auto' means 'keep aspect ratio', so it will also work for other percentages and other units, I suppose.

Hope this helps.
(09.11.2006, 01:24)

Simon:-
My 1st post here.

I like the background effects (am actually searching for a solution for someone on experts-exchange).

The only minor bug I've noticed is that middle-clicking doesn't allow the user to scroll the text (at least not in FF)

Just thought youd like to know. Apart from that, very SHINY!
(19.11.2006, 10:43)

Phil:-
Thank you Alex for this code. I'd gotten so close, but without the scroller div I was stuck with the image being left behind when users scroll down past the initial visible information.

Great work and fantastic for you to spread such useful information. Thank you again.

If you want to see it in action please take a look - phatpigeon.co.uk .

Thanks again!! Regards, Phil
(23.11.2006, 06:49)

HamletComplex:-
The proportional example, www.cssplay.co.uk/layouts/background2.html , seems to not work in Safari 2.0.4. Setting width to 100%; results in only the width being scaled. And height to auto; doesn't compensate. Of course, this is precisely the situation I need at the moment.

Can anyone confirm this? And, ideally fix, of course. I've tried a few things so far with no luck. Thanks in advance.
(29.11.2006, 17:33)

Faktor5:-
Hi Guys, good work on those scripts, i have one question, how can i make 3 table cells to load an stretch background image? it can be done?
(12.12.2006, 15:07)

-Sppyro:-
Just an observation. I sent you an email as well but it never was received. anyway....on the 100% background image demo (the one with the rabbit) the word "background" is mispelled. you have it spelled as "backgroung" on the title of the Page
(14.12.2006, 02:58)

Stu:-
Spelling will be corrected on the new site - coming shortly :)
(14.12.2006, 11:30)

Matt:-
for the 100% background image...do you have any suggestions to the size and dpi of the image when i save for web?
(14.12.2006, 19:07)

simon:-
I am a complete neophyte at this. When I try to use an image as a background only a fraction ogf the image actually appears - no matter how small I make the image. How do i get the image to fit on the page please?
(18.12.2006, 15:37)

Carol:-
As a follow up to Simon's post of 19.11.2006, my experience is the opposite.
I've just realized that the latest version of IE (IE 7.0) will not scroll with my mouse scroll wheel (or middle-clicking), only when I grab the scroll bar and drag. No problems in Firefox. Any suggestions?
(24.01.2007, 14:23)

ct:-
This is actually an application of the 'ghost in the box' hack which allows IE<7 to render "position:fixed" correctly.
(31.01.2007, 00:58)

BillB:-
Can CSS be coded to make a <div> height equal the browser window height?
I've tried setting the position of the top of the box, and that works, and setting bottom: 0px;, but it does not work.
If it is possible, any advice would be appreciated.
(03.02.2007, 15:10)

Jeroen:-
Stu, don't know if someone already mentioned this, but the bunny stretches out to an out of proportion killer bunny looking creature on my 22" widescreen monitor.

So anyone who uses an image of a person or building or such-like should beware.
(10.02.2007, 02:36)

Startyger:-
Great site Mr. Nicholls... Have you tried using Shiira 2.0(beta)? (hmdt-web.net//shiira/) great way to view your souce including CSS etc.... Using CSSEdit from MacRabbit to edit CSS, w3c and cssplay.co.uk for resources... yeah... i'll owe u donations when i start putting things into practice next month! very good.
(11.02.2007, 13:56)

Startyger:-
Um... that was honesty.. not meant to be spam... just making sure u knew... was using Omniweb's editor for strait HTML or a cocoa app called Tag..and CSSEdit. Cyberduck for Upload as it's automatic using the last two apps.. all in all css has made this process amazingly simple..... although, like u've mentioned.. css can be very complex....
(11.02.2007, 14:05)

DonM:-
I am having some trouble. When I use the code it pushes the images that were on the original screen to the far left side. It also makes the text off center. The background scales fine it just messes up the other things on the page.
(01.04.2007, 14:30)

Christian:-
After understanding the 100% Image-Page (the white Rabbit) I made a whole percentage-Website based on the percentage-calculation - AFAIK it is the 1st zoomin Site in productive state so far. Check out www.buschmann-winkelmann.de and play with the window-size, there are some invisible links so u can click on the "background"-Image on many places. These things zoom too.
(08.04.2007, 09:51)

Jenny:-
Stu-

I have a background image and it doesn't stretch all the way to the sides. Is there a code for that? I want the image to fit the entire screen without the default pink side borders. Thanks!
(18.04.2007, 19:55)

theboydanny:-
A very inspirational site, mr Nicholls. I'm learning everyday at css-play. Amazing examples!
Thank you very much.
Danny van der Ben, the Netherlands.
(16.06.2007, 16:03)

Gcyrillus:-
hi,

funny look that has that rabbit ! flat , or skinny , outer-space look :)

Well the technique has its limits . And the use of an image showing an animal , an object or whatever that a specific shape should not be used .

I had experimented this a couple of years ago and choose to stick everything in the viewport :
gcyrillus.free.fr/extensebleu/
Today i would say , it's fun to do , but shouldn't be used too much.

friendly and happy that this site exist , it's where i understood the use of css and started to have somme interest about it

Regards
(26.06.2007, 18:18)

byeee:-
I don't know why but PNG images stop working... on FF and IE6 on WinXP. Any idea why that would be?
(30.07.2007, 18:51)

Tim:-
Superb work. This page is nearly what I'm looking for but? When it come to printing the page, it print's the background picture. When the text on the site carry's on for more than 1 printable page, when coming to print it will only print what is viewable on the screen along with the scroll bars up/down and left/right. Also the text does not print as an A4 page it squishes it into 6-8 words to a line and makes it look stupidly thin on the printed page.

Any way just to make thing clear, I am in no way insulting your work because it is brilliant. It would take me a life time to do this myself since I have only started getting into HTML/CSS, and at a snail pace too!

If I can ask you kindly (Please) if I can use you’re coding? Also if you would like another challenge and try to sort out these problems I have pointed out, and let me use that coding also? I would be very great full and in your debt!
(06.09.2007, 14:10)

Krzysiek, Poland:-
hmm, very interesting site in IE but it doesn't work in firefox... What can I say .... help... :)
(13.01.2008, 19:42)

Stu:-
Krzysiek, all my demonstrations work just fine in Firefox.
(13.01.2008, 20:20)

niceart:-
Thank you for your crucial assistance in helping me to get the 100% background stretch I want for my site! - iheartniceart.com
(26.04.2008, 02:30)

Andrew:-
Hi.
I have implemented your 100% background image method on a site I am developing for a customer. The problem is that when I add a link (e.g. to a JPEG image) it doesn't open the links. Email links work fine, but site and image links don't.

Do you know why this is or how to get around it.

Any help will be greatly appreciated
(08.05.2008, 14:29)

Stu:-
Andrew, I would need to see your page url to find out what is going on with this. Email me stu{at}cssplay.co.uk with more information and I will see what I can do.
(08.05.2008, 15:19)

mrkid:-
this is really cool, I really Like it, keep on
^
(26.06.2008, 04:15)

JOJO:-
thanks good idea to make full background
(08.07.2008, 15:35)

Bry:-
Clever chap - needed this for a clients website looks impressive - will add the url later
(17.07.2008, 20:23)

Victoria froud:-
Oh please Stu, have been trying to do this for months and just can't move on. Have drawn images in PS to place as a background image in DW for my site. Have been placing it in Modify page and don't know if I'm doing that right. Also don't understand enough about code to make it work. I am desperate Stu, if you are too busy can you point me to someone who can simplify the proccess and help me move on. With thanks Vicky.
(28.07.2008, 11:42)

Richard:-
Thanks. Was able to tweak this (in keeping with what I found at css-tricks.com/how-to-resizeable-background-image. I got a properly proportioned, resizing background image on my site (oldWithoutMoney.com), behind a split header, split footer and 3 columns. ;7)
Cheers.
(31.07.2008, 21:06)

g-man:-
Really, really good! Very impressive.
I'm going to use this code for my portfolio background images. Nothing worse than ugly black/white edges around the bg image when you enlarge it on a Mac Widescreen. I am using some abstract images too so when they stretch it wont matter much. Also, the image size wont blow the modem when being viewed! My hunt is over! You have saved me from much pain, thanks!
(16.08.2008, 15:26)

g-man:-
RE: VICKY
Just copy the code in the head (ref.: body, background, scroller, content) and paste it into the head on your html page and change the background image to the one you will be using in the main body...
(16.08.2008, 16:25)

BryGee:-
Fantastic piece of code that has been invaluable to me
(25.08.2008, 01:08)

Robert Cody:-
But what happens if the image is in portrait orientation? It would be nice if the long dimension of the portrait image just fit the vertical dimension of the screen with a background color on the two sides of the image to fill up the horizontal space.
(28.09.2008, 18:54)

markus:-
great idea - good code!

I use it for my own little website,applying a background-pic that works really nice - even if you set the viewport to proportions that do not fit the ratio of the used photo.

keep up the good work
markus

p.s.: if you want to have a look:
www.visuelles-buero.de/
(03.10.2008, 17:34)

Doran Lower:-
Stu,

I'm assuming it's okay to use this code for commercial purposes?
(12.10.2008, 02:30)

Harrish Prajapatii:-
hey this is really a nice thing. i love it but one thing i cant get from it is that if i would like to make background center center means center of the page and content would be also center of the page then what is the right idea for me to do that ..........

can u plz explain me that thing cause i m facing this problem since last so many times.


thax
from harry
(05.11.2008, 07:46)

Josh:-
is there a way to format the scroll so it dont scroll all the way to the top of the page, i want to position a logo on the top but i dont want the text to flow over it but stop just below the logo? hope that makes sense
(29.11.2008, 18:24)

Roly:-
Great solution! but mouse scroll wheel not work in IE7, I change some parameters in #scroller an #content and not obtain good results.
(08.12.2008, 14:01)

Dirk:-
Hmmmm... Help. When i cut and past the code, i still see a small, what looks like a small margin, all the way around it..
help, help!

i uploaded it temporarily so you are able to view the source code. www.vitavibrations.com

thanks
(31.12.2008, 06:29)

Dirk:-
Beuler?
(02.01.2009, 22:13)

Stu:-
This is the body default margin/padding depending on browser. Just style these with zero value:
body {padding:0; margin:0;}
(02.01.2009, 22:24)

petenice:-
Thank you
(03.01.2009, 01:26)

Dirk:-
I thank you. ; )
(03.01.2009, 03:06)

John Nicholls:-
Perhaps you could write into ".net Magazine" - they recently replied to someone who wrote in wanting to do this that it could not be done. Clearly it can!
(06.01.2009, 22:50)

Peteski:-
works great - thanks!
(17.01.2009, 19:28)

xiana:-
Nice!

Thanks a lot for posting it!
(20.01.2009, 17:01)

tomatoe:-
Simple as a CountDown 2 a BlastOff - Thanks

www.tomatoe.net/J/

10/4 M.D.
(05.02.2009, 20:05)

Israel:-
It's a simple code which I like very much. It works with most browsers and OS's except IE on Vista. It displays the background image only and not on the full height. Any suggestions for a fix?
(15.02.2009, 20:53)

Andrea:-
I've tried and it works. I would like to apply it to this page www.bremboski.it so that the big gif is floating over the background in the center of the browser windows. I've tried to put all the rest of the opage in the "fixed" div but this is the result www.bremboski.it/index2.html . I can see the background but not the resto of the page. Any help? Thanks
(20.02.2009, 08:02)

Dirk:-
Andrea, I had the same problem. I fixed the issue by "positioning" the hidden content to "absolute or relative" and by adjusting the z-index i was able see what was previously unseen. hope this helps. Here is a great article on positioning:
(22.02.2009, 22:00)

Dirk:-
www.autisticcuckoo.net/archive.php?id=2004/12/07/relatively-absolute
(22.02.2009, 22:00)

Jon:-
OMG ive looked for days trying to find a working solution to this problem TYVM
(21.03.2009, 07:36)

Maryann:-
Is this code ok to use for commercial use?
(17.04.2009, 20:31)

Stu:-
Maryann, there is no copyright on this method.
(17.04.2009, 20:44)

Rob:-
Very, very nice fix -- thank you very much!
(13.05.2009, 17:56)

~Valentine~®:-
this is toatally awsome work.keep it up
(19.05.2009, 23:03)

Suzanne:-
Stu, Thanks as usual, you are the best! ;-) I have searched and searched to find if this is the best method (html vs css) for calling a background image, but cannot find a thing. I value your opinion. Moving it from the html to my css really decreased my load time, which is what I was after. I had decreased the colors of the image all I could without losing image clarity.

Thanks,

Suzanne
(03.06.2009, 14:38)

hubier:-
Amazing!! nothing more to say. Well, one more thing: thank you
(01.09.2009, 17:48)

Seb:-
thx, works great!! :))
(23.09.2009, 14:13)

Peter:-
The code looks great in your example!
But for some reasonm, when I try it on my joomla site, the image I pick ends up on top of everything else, covering the whole site.. any idea what I'm doing wrong?
(04.10.2009, 01:01)

vikraman:-
This is a great template!

I am having trouble getting the scrollbar to show! It works on the sample, why would it not work on my site?

courses.be.washington.edu/ARCH/504-402

I can actually scroll using the mouse roller, but for people on a laptop, it wouldn't work.
Anyone know what's wrong?
(21.10.2009, 06:39)

vikraman:-
woops:
courses.be.washington.edu/ARCH/504-402/top10.html
(21.10.2009, 06:40)

Chris:-
How can you change the color of the text? to say <text="#800517">...I've been fooling around trying to do this, but it won't take...I must be missing something simple.
(26.10.2009, 20:39)

Sasha:-
Great and simple! Thanks for posting.
(24.11.2009, 13:34)

crokano:-
You show me a new world thank you very much for that!

#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
(22.01.2010, 16:26)

philip (webdesco):-
great example on how to achieve a stretched background ahead of cs3. One thing I'd change is to put the image at the end of the code just before closing the body, that way if (for some strange reason someone has css turned off) the image is at the bottom not at the top
(31.01.2010, 21:26)

doguthegun:-
allah razi olsun
(10.02.2010, 09:45)

Bart Verlinden:-
I copied the code paste it into my web, changed picture for another one, but it does not work. Anyone...anyone :-)
(24.03.2010, 16:49)

shiwam:-
hi, i'm an student and i need to make an website . My problem is that i made my website , but when i open my website on an other resolution my background image moves. I want an code that can help me to resize the background image when i open the website on an other resolution. Please help me . My e-mail adres is shiwam_isrie@hotmail.com
(31.03.2010, 19:37)

Mettelmann:-
That's exactly what I'am looking for. But I don't understand it. I have a joomla page with a template generated with artisteer. And the problem is now, that I can't find the place, where I have to change these things. Is that template.css?
(08.04.2010, 15:19)

Al:-
Great design Stu, as with all your other work. I often wonder why many other websites don't implement a CSS only menu, when script blockers would otherwise block the flash menu.
(13.04.2010, 10:06)

dylan van der Heij:-
THANK YOU GREATELY STU! I was working on this for like two weeks.. then I found your post..

The only thing I regret about this post is that it's not shown on top in google search!

thank you!
(26.05.2010, 22:00)

Mattbow:-
thanks you. I tested with firefow and it is great. however with IE it seems there are still little problems.
(09.06.2010, 17:26)

Marcin:-
Thanks, this code saves me live :-)
(21.06.2010, 23:45)

Lukas:-
This technique doesn't work on the iPad :( There are no scrollbars
(02.07.2010, 08:39)

Bill:-
Good job, but not good if you need to turn the stylesheet off
(06.07.2010, 19:07)

Lisa in FL:-
Um, you totally rock!!!

This worked great for the sports website I am designing and did it without Java.

Thank you :)
(19.07.2010, 16:34)

Tim:-
Bart,
It does work! Did you copy the code correctly? You must include the #background and #scroller divs, together with their relevant styles.

Thanks Stu, I struggled for ages on my own to get it just short of correct. I wish I'd found your solution first!
(08.08.2010, 22:22)

ranpha:-
The demo doesn't work fully with Opera browser. If I open the demo page www.cssplay.co.uk/layouts/background.html in Opera, then let it load fully, then resize the browser window vertically by dragging the bottom border of the browser downwards. Resizing the browser window horizontally, or using the maximize/minimize button works.

See dl.dropbox.com/u/132004/opera.jpg for a graphical demo. The browser version is Opera 10.5.
(28.08.2010, 10:02)

Mike:-
An elegant and simple solution. Thanks Stu from Colorado USA.
(19.09.2010, 11:32)

Jan:-
Just what I was looking for. Thanks Stu!
(21.09.2010, 14:53)

Prophet:-
Wow, that's creazy! I mounted it into my page code, and it works perfectly on IE 8, but doesn't work on FF 3.6.10! What the Foot?!
(23.09.2010, 00:13)

Jude:-
Has anyone got *any* idea why the scrolling disappears on the ipad?

I've thought and thought but can't think what's causing this!
(21.11.2010, 22:06)

Jude:-
I think the details at cubiq.org/iscroll may address the issue with no scrolling on the ipad, but I haven't been able to implement it for this example. Any ideas?
(21.11.2010, 23:14)

J:-
how do you make a link to an page anchor using this? doesn't seem to work...
(22.11.2010, 08:21)

Nathan:-
This trick disables scrolling with the mousewheel held down on the computer, and I can't scroll at all on any of my mobile browsers (Windows/iPhone/Android). That's kind of jarring.
(31.01.2011, 20:35)

Yvonne Wheaton:-
I can't figure out what I am doing wrong. I spent yesterday trying to get this to work. My code via your idea

<head>
<style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden; text-align:left;}
body {font-family:timesnewroman, papyrus;}
#bkgrnd {position:fixed; top:0; left:0; width:100%; height:100%; z-index:1;}
#content { position:absolute; z-index:2;}
</style>

</HEAD>
<BODY>

<div>
<img src="images/fadedbkgrd.jpg" alt="background image" id="bkgrnd">
</div>

<div id="content">

My background still ends up on top. This is frustrating. I feel that I must be missing something obvious.
(11.02.2011, 15:27)

Yvonne Wheaton:-
Hey Stu,

Me again. One of your commentors said it doesn't work on IE/Vista, there in lies my problem. Hubby has IE/XP, doesn't work there either. Works fine with Firefox/XP. Bummer, it looks really good when it works. I liked the simplicy of the code. I will have to do something else.
(11.02.2011, 16:14)

officemanager2:-
I've followed this as close as possible, but I can't get anything in front of the background??

Any idea what I am missing? I'm thinking it is tied into the z index?
(03.10.2011, 23:37)

Michael:-
Implement a footer into this design, is that possible ?
(05.12.2011, 05:03)

Ahmed:-
Great help on the spot mate thanks. :D
(21.01.2012, 18:26)

Mark:-
Cute bunny. (I hear they're the tastiest.) Kidding folks, kidding.
(01.02.2012, 01:59)

Kate:-
This is some great CSS, thank you!

I would like to resolve a problem I have with using version 1 (for all browsers) in IE (8) - I can only scroll down (or up) the page when the mouse is hovering over my content area, which is 950px wide.

I'd like to be able to scroll with the mouse on any area of the screen - rather than having to click and drag on the scrollbar on the side of the screen).

I've tried playing around with some different div attributes and widths etc but can't seem to get it to work. Does anyone else have this problem or a solution for it?

Thanks!!
(07.02.2012, 04:15)

jim:-
THANKS A TON for this article on fixed background... I am a fan of urs ... I have used your css menu in probably all my websites.
(11.11.2012, 06:08)

Brendan:-
Thanks, brilliant!
(22.02.2013, 19:36)



Post

Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page