There have been quite some misgivings on how this relation works. Problems were mostly the incorrect implementation in browsers and the difficulty of it. Before a few weeks ago, I actually thought that the viewport and canvas were the same thing, can you believe it? Now I know how the implementation in Mozilla sort of works I understand the concept a lot better. Partly because an annoying bug (No more stretching :root!) has been fixed. This also uncovered how background actually works, since some people noticed that it didn't behave as expected.
The viewport is the part of the screen that you are currently seeing; everything you see from the webpage is part of the viewport. The canvas is the part of the document the background-image is painted on. You can say it has an infinite height and width so you can't position something on it. Therefore, a background is painted on the canvas but positioned with respect to the root element. When you have background-attachment:fixed it is positioned with regard to the viewport (similar to position:fixed). Since it is positioned with regard to the root element and the root element doesn't have a height of 100% (some browsers, like Mozilla older then 1.7, Opera older then 7.5 and Internet Explorer do this incorrectly, maybe Safari as well, not sure) you can't center a background-image that easily. You will have to add html{min-height:100%} or html{height:100%} depending on the effect that you want to achieve. Positioning it with regard to the viewport will work as well, of course. Since the viewport has (currently) always a height and width of 100%. (There is some discussion about @viewport and whether or not it should allow the height and width to be applied on it.)
To explain a bit further, you can't position something on the canvas since 50% from an infinite height is still an infinite height.
I am amazed you didn't know that about the canvas, viewpoint, etc. I though nearly everyone did that considered themselves competent at CSS.
Hi Anne, *gratz* to your new design!
Do you now wether this "root-viewport-canvas"-concept documented in the "Cascading Stylesheet the definited guide, 2nd Edition" book by Eric A. Meyer, you mentioned a few weeks ago?
ben_, probably, but I don't have the book here unfortunately.
Robert, if you never deal with it (except when you are creating some friggin test case)... (And I know some people read the specifications first.)
I have a diagram for you on the viewport
There have been quite some misgivings on how this relation works. Problems were mostly the incorrect implementation in browsers and the difficulty of it. Before a few weeks ago, I actually thought that the viewport and canvas were the same thing, can you believe it? Now I know how the implementation in Mozilla sort of works I understand the concept a lot better. Partly because an annoying bug (No more stretching :root!) has been fixed. This also uncovered how
backgroundactually works, since some people noticed that it didn’t behave as expected.
PPK also did some nice tests which could become handy
The viewport is the part of the screen that you are currently seeing; everything you see from the webpage is part of the viewport. The canvas is the part of the document the background-image is painted on. You can say it has an infinite height and width so you can’t position something on it. Therefore, a background is painted on the canvas but positioned with respect to the root element. When you have
background-attachment:fixedit is positioned with regard to the viewport (similar toposition:fixed). Since it is positioned with regard to the root element and the root element doesn’t have a height of 100% (some browsers, like Mozilla older then 1.7, Opera older then 7.5 and Internet Explorer do this incorrectly, maybe Safari as well, not sure) you can’t center abackground-imagethat easily. You will have to addhtml{min-height:100%}orhtml{height:100%}depending on the effect that you want to achieve. Positioning it with regard to the viewport will work as well, of course. Since the viewport has (currently) always aheightandwidthof 100%. (There is some discussion about@viewportand whether or not it should allow theheightandwidthto be applied on it.)
It just depends on the way how you define screen. The screen doesn't always have to be the browser-window.
I am amazed you didn't know that about the canvas, viewpoint, etc. I though nearly everyone did that considered themselves competent at CSS.
Comment by Robert Wellock — 2004-05-19 @ 10:05:45
Well browsers are still strugling with this issue and it seems that it is still not clear.
I'm still very confused. The only thing I know for certain (I read it within some specifications of the W3C) is that the viewport is a place onto the canvas.
Note that his tests are not conform Mozilla/Opera latest rendering and his interpretations are also incorrect.
Jerome, from Mozilla's point of view (with people like dbaron, hixie, bz, fantasai behind it, it almost must be correct) the viewport is the part of the website you are currently viewing.
Don't worry I wasn't being sarcastic or anything; even though it might have sounded like that. I just found it very odd there was such a high-level of confusion on the topic since it's probably one of the first things I learnt several years back when doing my first CSS-P layout.
Perhaps I'm just odd...