Programming.a.baby - (WebDesign) Background Images ( picture background design for your ) ( web design programming )

Of course it would be good if before you read this Article you would understand a bit of Html and Css, but why am i here, if is not to make it simple, explaining you how to do.

One way or the other, you can take a look on my previous article here ( Programming.a.baby - (WebDesign) Images on Web Pages ), then you will look this article with other eyes.

Now, about the Background images, there are something you have to know.

• A background image can cause a great web design impact on your web pages, but it can also make the load of the page harder for slow Internet connexion users or if your server is slow or even if it's overloaded
• Background images must have shape that when repeated will make a impression that you are only using one, or it will make your web page horrible
• Images that you use for background must be in the same root of your web pages avoiding that only half of the content will load case the other images host is offline
  

The Html code for the Body

Suppose you have a folder named "images" inside the root of your web folder like you are seeing at your right on the Image 1 and inside this image's folder we have a image "bg.jpg" that we want to use as background in our default.html page.

Now you want to go to your default.html web page that you also see in the image 1, (obvious that you can have another web page with other name in there)

Step 1

1. Open the Html Document with your favorite html editor or then open it with notepad,
2. Imagine that your Html is like the html from the Code 1.1 at your right
3. Put the Html code that you see in the Code 2 inside the Html doc
   
4. As you see in the Code 1.2 direct in the Body of the document
   

What will happen

• Now the page will have a background that all your visitors cas see it
• If you let the code like that, the image will be repeated by default in the background, so if the image is smaller than the monitor area or than your web page size, you will see your image multiplicated several times

Playing around with the parameters

1. If you do not want it to repeat, because you are satified with the size, then update your code like this:
   • style="background-image:images/bg.jpg; background-repeat:no-repeat;"
2. You want to repeat only from Left to the Right, use this:
   • style="background-image:images/bg.jpg; background-repeat:repeat-x;"
3. You want to repeat from top to bottom, update like this:
   • style="background-image:images/bg.jpg; background-repeat:repeat-y;"

Take a look at the Code 1.3

Good images for backgrounds are often that type that:

1. Have a good small size (1KB to 50KB)
2. And can repeat it self without being notest

One good example are the gradient images, you can use your image's editor like photo shop or paint shop pro and make a image gradient that start with a color and finish with another like a Rambo or like a mix, then if you want to use it:

• for repeating from left to right you can cut it with the follow size (1px per 3000px)
• For repeating top to bottom (2000px per 1px)

Only the fact you are using "1px" in both methods, the image will have a very small size like "1KByte size", it will aloud your page to load very fast

If you have some dificulty to make these kind of images, please go to this web site (dynamicdrive.com) where you can make a gradient image online for free and fast, using the measures i gave you without the "px",

.

.

...

If you want to know more about background images, like giving positions, and using them in another html elements, please read my Next Css Article Here

( Programming.a.baby (Css) - Body Style )

.

.

...

Programming.a.baby - (WebDesign) Text Alignment