web page background( how to )

[divebuddha]

hi there guys

just a quick one that may sound a little daft but wondered how do i apply a picture or a graphic or picture as a web template background

basicaly my web sites template has a grey background and wondered how to apply a pic to add some colour

or is there another way to do it ?

any info would be greatfully recieved

and if anyone would like a look at the site to get an idea what im after the link is below?

basicaly want to take away the grey and add a pic instead

http://divebuddha.x10hosting.com/

[walidno1]

so, instead of using the grey colour u want a background image??

use this code:

body {
background-image: url(file:///D|/Website/Images/Page-BgTexture.jpg);
background-repeat: no-repeat;
}

-----------------------
using repeat (repeats both in y and x axis), repeat-x (x axis) and repeat-y (y axis), u can fill ur background (depends on ur background image). If the image is large enough then use no-repeat....if not, use the appropriate value........btw, I recommend using pic with small dimension as it enables faster loading and u can reproduce the same image using the repeat function..........

Hope it helps
Edit:

so, instead of using the grey colour u want a background image??

use this code:

body {
background-image: url(file:///D|/Website/Images/Page-BgTexture.jpg);
background-repeat: no-repeat;
}

btw, url(file:///D|/Website/Images/Page-BgTexture.jpg) means the directory of ur file.........so, u probably have to change this

[divebuddha]

so, instead of using the grey colour u want a background image??

use this code:

body {
background-image: url(file:///D|/Website/Images/Page-BgTexture.jpg);
background-repeat: no-repeat;
}

-----------------------
using repeat (repeats both in y and x axis), repeat-x (x axis) and repeat-y (y axis), u can fill ur background (depends on ur background image). If the image is large enough then use no-repeat....if not, use the appropriate value........btw, I recommend using pic with small dimension as it enables faster loading and u can reproduce the same image using the repeat function..........

Hope it helps
Edit:


btw, url(file:///D|/Website/Images/Page-BgTexture.jpg) means the directory of ur file.........so, u probably have to change this

thanks for that friend its much appreciated

not saying that i understand exactly where to putthe image though so will have to play with it and try it out

but a good idea using a smaller image and making it repeat ?

is there any specific kind of images that work well in template backgrounds?

[farscapeone]

You can eather use absolute or relative path to specify your image location.

Absolute path is a full path like www.example.com/images/some_image.png.

Relative path refers to a location relative to the page where you specified your background css image. So if you have a css file like www.example.com/default.css and image like www.example.com/images/some_image.png the relative path of your image would be images/some_image.png.

As for the image format I like to use PNG but cos it's samll yet preserves the quality better then JPG. This is only true when using backgrounds with no details (like gradients) but if you want to put some extra detail into it JPG is the way to go. The only thing you have to think about is how big your background image is and use the format and compression that gives the best size-quality ration.

[divebuddha]

oo i tried the code and works fine i just need to find a background pic that gives it a bit more colour whist preserving the loading time and not making it too heavy on loading?

bit hard when it repeats getting the pic to look similar when they both join in the middle?:cool: