Questions about backgrounds

[InquiringMind]

I am working on a website for my wife and have designed a background image. I have several questions about how to best display it. The image has a block of color down each side and is white in the middle. When I look at the site on my work PC, I can see lots of whitespace around the background image because my monitor here is a 19" and I have the resolution set high. Is there any way to stretch the image to fill the screen? I am building the website in HTML/CSS. Also, what is the best file format for a background image?

To ensure that a background image fits multiple screen resolutions does it make more sense to have graphics down one side only and have a seperate image positioned down the other side?

Thanks in advance for any help.

 

[Gene]

The logical way would be to have two separate background images (in a table), one for the left and one for the right -- each in its own cell. Then set the table at a percentage for width (not a fixed pixel size). The result is you should have the left and right background image with white space bertween that expands and contracts with various resolutions.

 

[InquiringMind]

Thanks for the response.

Is there anyway to do this without tables, using CSS instead?

 

[Gene]

Thanks for the response.

Is there anyway to do this without tables, using CSS instead?

I'm sure there is -- but that's not my area of expertise... hopefully someone else can help you with the CSS method.

 

[Chilli Con Carnage]

Hi,

Theres a few options you can go for here depending on what type of image the background is.

If the background image is a solid or gradient color on either side like this website then you can make an image 1600 pixels wide and just 5 or 10 pixels high, centering the image and repeating vertically will almost always fill the browsers screen no matter what monitor size or resolution they're running.

If the background image has some sort of picture or graphic on it then you could set the background centred like above AND set the background colour of the page to the same colour as the edges of your background image, this would eliminate any white space around the edges.

Try and go for .gif images with things like this as they're generally a lot smaller than .jpgs.

The css rule for the first option would be something like:

body {
background-color: #FFFFFF;
background-image: url(foldername/background_image.gif);
background-repeat: repeat-y;
background-position: center;
}

The rules are the same for the second option but take out the repeat if you want to.

Hope this helps.

 

[admans]

Thanx for the info . I was also facing the same kinda of problem

 

[TeviH]

Like Chilli said, but since your problem was displaying white instead of black, simply set the background-color to be black (#000000) instead of white. Then, any area that is not covered by the background image will be black.

To make the image stretch to 100%, you can use the background-size attribute, but support for this (CSS3) is very low.

body {
background-image: url(background.jpg);
background-repeat: no-repeat;
background-size: 100%;
}