Creating website backgrounds (screens, work, computer, browser)

[ajsmith365]

How do you create and apply website backgrounds that pop...something like the following.

(1) 63 Impressive Website Background-Images: Trends, Resources and Tutorials - Noupe

Websites like these, but with the white text area in the middle for textual information.

(2) Bossip | Gossip for the Hardcore | Black Celebrity & Entertainment News

Moreso like this where they have an image (I think) as the background and use tables in the middle of the page to render their text.

My questions are as follows:

(1) Can I use any size image or should my image meet certain minimal specs

(2) What format should the image be (PNG, JPG, GIF, SVG) or does it matter

(3) Is there a certain code that will make the background image fit all screens. Basically, I don't want any unneccessary horizontal or vertical scrolling

Thanks for your time and feedback.

[thecoalman]

To "create" you can write a book, get an image editor and try making some. Specific questions are better...... GIMP is free.

You would apply background image to nearly any HTML element using CSS, there is tutorial here for background and the variants:

CSS background property

(1) Can I use any size image or should my image meet certain minimal specs

You're going to use what ever meets your needs.

(2) What format should the image be (PNG, JPG, GIF, SVG) or does it matter

What image format to use really depends on the content of the image. Simple images without a lot of color lend themselves to .gif. Photo type images work best with .jpg.

.png can do either well but it has larger file sizes generally especially for photo type images. One big advantage it does have is alpha transparency.

(3) Is there a certain code that will make the background image fit all screens. Basically, I don't want any unneccessary horizontal or vertical scrolling

Background images will not cause scroll bars, only content does. It's possible to stretch images, search for fluid background image. Generally you want use it's native size. Browsers do not do a very good of on the fly scaling. There is tricks for this though, for example you can repeat an image.

[ajsmith365]

Thanks, thecoalman. Some of my questions were answered. I'm assuming I need to use a very good sized image as if I stretch it to a computer screen (for background) size, pixelation could occur.

I am using Nvu for website creation (don't want to spend the money on Dreamweaver yet). I'll experiment, but thanks.

[thecoalman]

Originally Posted by ajsmith365

I'm assuming I need to use a very good sized image as if I stretch it to a computer screen (for background) size, pixelation could occur.

That's a two way street, the typical method for resizing an image is called bicubic but that requires processing power. Browsers typically just strip out lines of pixels. You'll get a jagged or stair stepping pattern on edges at an angle especially if they have contrasting colors. Note, I haven't experimented with it in years and they may do a better job so try experimenting with it

[Tek_Freek]

Unless you have a specific image in mind you can find a lot of free images to use. The quality varies widely, but there are some nice ones to be found.

free website backgrounds - Google Search