Web Studio Next CSS Backgrounds - Lesson I

How to use 4 tiny images to make the background for an entire site

If you are not familiar with web studio refer to the instruction page

CSS BACKGROUND IMAGES

I'm going to show you how to make an entire websites basic background with under 10k in images. We'll start with what is called an image tile.

That's the largest size image we'll use, it's only 4k
We'll use CSS so it will only load once for the entire site and we'll put a colored background as well so it won't create a white flash when the page loads.

You can right click on these images and save them to your working folder if you like.

You can use web studio "insert background" to see it while you work but remember to remove it
before you upload so it isn't loaded over and over again for every page.

body {background:#2A1506 url('wood.jpg') repeat;}
#2A1506 is the color behind the image,
and wood.jpg is where you put your image name

Attach your "background tile" image to WEBSITE PROPERTIES

Use "INSERT PROTECTED GRAPHIC" for these 3 images

We'll use 3 images for the content fields and take advantage of web studio
The top & bottom are 3k and the middle is only 1/3 of a k
You'll be able to resize the height by stretching the middle image

We actually can do this with no images at all but some people still use the old IE8 browser
so they wouldn't see the radius corners or the shadows - see CSS Backgrounds II for more

top.png

bottom.png

middle.png

How to use the images

You insert the 3 protected graphics on your page, then use PAGE LAYOUT to align them all left. Send the middle image to the back and stretch it to the approx. height you want.
(TIP: If you hold down the shift key they will stay aligned when dragging)
Now drag up the bottom image put your content and adjust the size of the middle.

When you use "Protected Graphics" Web Studio put's them into a folder called "_RefFiles" so that the same image is used for all instances across the entire site. That means all of these images only need to load once.

What's happening and the advantage

Using "GROUP" from the CREATE tab

Once you have one made you can select the 3 and use "Group" & "Un-Group"
Once you do that you can center them as one to the page, or copy paste to other pages
(TIP: When you put them together get them close then use the arrow keys to move
them a pixel at a time so they don't overlap too much)

I made one image in my art program, then copied and cropped them to get 3 exact images. I used png images because they are the best for transparent shadows.

You could make the images different widths as well but I find if they are too different in size you notice the radius corners get deformed, so you could make a smaller set for those.

These are the same 3 images made a bit smaller in width. Use PAGE LAYOUT "make same width" too much smaller deforms the radius corners though.

Using the same image for the middle means we can make large looking pictures by using a tiny image to fill in the gap so a HUGE picture that could get up to a couple of hundred kb can be kept to 3k and load instantly.

These small images can build up just on one page and if you have a lot of pictures for your content you want the background to be as small as possible. Using these all the images are just the
three tiny pictures so no build up!

body {background:#2A1506 url('wood.jpg') repeat fixed;}

Want to make the background fixed so it doesn't move?
We can do that by adding fixed to the end of the code:

There are millions of these for free on the interent, search for "background tile"

This is the demonstration of what we will be doing

Paste this code Inside Head for the main tiled background image

Go to the HTML tab, and in Insert Page HTML select Inside Head