Ollie Posted April 5, 2006 Posted April 5, 2006 I like to think that I am quite good at various aspects of web design, html and the like, but I have a question I haven't managed to find a solution too. When you design a site, take for example revo-europe's home page, they designed the whole look and feel, probably with something like Photoshop. If you look at the home page on the right you have the updates section. When this was designed, it must have been made so that it didn't matter what they put into it, it would always 'stretch' so that it is always the right size for all the articles, without having to always re-do the back ground imagry, but how? Is this done with tables or iframes or something? I thought tables were old fashioned in the HTML world?
Shorty Posted April 6, 2006 Posted April 6, 2006 I like to think that I am quite good at various aspects of web design, html and the like, but I have a question I haven't managed to find a solution too. When you design a site, take for example revo-europe's home page, they designed the whole look and feel, probably with something like Photoshop. If you look at the home page on the right you have the updates section. When this was designed, it must have been made so that it didn't matter what they put into it, it would always 'stretch' so that it is always the right size for all the articles, without having to always re-do the back ground imagry, but how? Is this done with tables or iframes or something? I thought tables were old fashioned in the HTML world? Vertically tiled images as a background. If a table is made using percentages or without pixel size restrictions, it will resize vertically according to the content placed in it. If it has a vertically tiled background (i.e. a background which when placed in a vertical row will look consistent), it will continue to fill the background all the way down. Edit: I'll give you an example, take a look at this thread, no matter how many posts are put in it, the background will continue to 'grow' without needing new images. The background image is here: http://revo-europe.com/images/forum/forum_bg.gif As it tiles one on top of the other, it creates the light grey bar behind this post.
Sarka Posted April 6, 2006 Posted April 6, 2006 On RE's homepage to get the background they use this image: http://www.revo-europe.com/images/pge/bgpattern.gif It is tiled on thier stylesheet: body { background-image: url ("/images/pge/bgpattern.gif") } and it is automatically tiled until the page finishes. Things like that are very simple when using CSS, have a look at RE's stlyesheet: http://www.revo-europe.com/include/style.css It's a great thing to learn!
Ollie Posted April 6, 2006 Author Posted April 6, 2006 I see. So the back ground is made up of millions of little pictures that will tile down as more content is added. I would have thought that would take ages to render though? Does that mean (if we continue with the revo theme) that there are also lots of layers? From the way I see it there must be at least three layers, the dark background, then the white, and then each posting, which I assume is created using tables? EDIT: Also, why isn't revo centered in the browser?
Shorty Posted April 6, 2006 Posted April 6, 2006 I see. So the back ground is made up of millions of little pictures that will tile down as more content is added. I would have thought that would take ages to render though? Does that mean (if we continue with the revo theme) that there are also lots of layers? From the way I see it there must be at least three layers, the dark background, then the white, and then each posting, which I assume is created using tables? EDIT: Also, why isn't revo centered in the browser? Millions? Hardly, and any fast pc can render a <1kb gif in microseconds. From what I can tell with Revo Europe's design, there's just one background image for the whole main layout, with the spacing carefully organised so that sections fit into their allocated area of that image.
Ollie Posted April 7, 2006 Author Posted April 7, 2006 Millions? Hardly, and any fast pc can render a <1kb gif in microseconds. From what I can tell with Revo Europe's design, there's just one background image for the whole main layout, with the spacing carefully organised so that sections fit into their allocated area of that image. Ok, maybe I mis-understood. All of the links that have been posted just have tiny gifs in them. The one that sarka posted of the background pattern is just 2x2 pixels, so I thought that the style sheet just tiled it over and over?
Shorty Posted April 8, 2006 Posted April 8, 2006 Ok, maybe I mis-understood. All of the links that have been posted just have tiny gifs in them. The one that sarka posted of the background pattern is just 2x2 pixels, so I thought that the style sheet just tiled it over and over? Ah I didn't actually follow that link. That's for the dark grey background at the back of this page, see how it's not plain grey, it's actually grey with a black dot? Imagine a 2x2px square like this A B C D if A,B and C are grey, and D is black, then when tiled, it will look like lots of black dots =) Still, a 2x2 image on a background with a resolution of (usually at most) 1280x1024, and bearing in mind a website doesn't fill your whole screen, is only about 320,000 images =) And when they're so completely tiny (50 bytes!) its not hard to render them that many times. Think we've gone a bit off your topic there but that's how the background tiling works. Using CSS you can also choose to have the background only repeat vertically or horizontally.
Recommended Posts