There’s a few ways.
The old school way is via the body tag, using any image that can be tiled horizontally and vertically such as these ones. Oh my, even just looking at those images brings back the nostalgia of old web design! You can also make a tiled image in Photoshop, search for ‘photoshop tutorial tiling image’ probably to find out how. Here’s the code for the body tag version.
The full control version, and easier way in general, is done through CSS. There are links here already for that, google for “css background image” (try with the word tutorial) to find more tutorials.
As for bg image size, yes this is something to consider, but not in all cases. Tiled backgrounds take up very little space as they are usually a few hundred pixels square (some are even as small as 20 pixels etc). Sometimes you need a full screen bg and yes it’ll be a few hundred kilobytes (try to make it under 600, people won’t wait around all day) but it can be done if you really need to. But there are a lot of tricks to doing BGs.
As always, I recommend observing. You can do it right here in Fluther. Case study time! Right click and view this page’s background (http://davinci.fluther.com/static/images/v2/wallpaper.jpg). 131 by 738 pixels tall, it’s about 19 kilobytes, and a jpg [I bet you could save even more kilobytes by making it a gif as this is the perfect image candidate to do such with, but honestly, we’re not designing for microbandwidth here]. The code to insert it (go and find this code, look at it, tell me if you can’t find the CSS code and I’ll tell you how to do that) has a repeat-x, hence it repeats along the top. The trick here is that the rest of the page has its background color set to the same dark blue as we see in the image, hence it looks like the background is seamless but in actuality it’s just a hidden seam.
Above everything else, consider your audience. Designing an iPhone site for instance, one that fully configures and looks like an app, you have the flexibility to hard code your background and DIVs, so by creating an optimized jpg or gif background, you can incorporate one in with relatively no delay for the user.
And one last tip from me. A lot of learning web design is getting into the code and figuring it out for yourself, or at least giving it a shot (not to discourage you from asking your questions of course!). The magic of web design is that if you can see it on the screen, generally speaking you can access the code (as long as it’s not in Flash, and you can’t do this for server side languages), you can save a copy of the website and get in there with your HTML editor and figure out just exactly how they did that awesome BG or whatever you see. Have you seen this website, Smashing Magazine? I think you will enjoy it, it contains a lot of information and ideas which for us designers is pretty much a goldmine! Oh, look at that, they even have a wonderful article with examples of tons of backgrounds! Sure they don’t have any code there, but that’s cause you don’t need it, you can figure it out for yourself. Take this site, looks really complex eh? Not really, look at the bg image: http://blog.raduceuca.com/wp-content/themes/warlord/assets/images/backgrounds/header_background.png Hohoho, that takes a lot of mystique out of it doesn’t that! Now you can see that the design is based a lot on positioning of DIVs, try deleting that BG and coloring the DIVs different solid bg colors. Cut out all the content and play with the tags, look them up in W3 and find out what they do!
Composing members:
0
Composing members:
0
