We help IT Professionals succeed at work.

best size for background image

SA85
SA85 asked
on
i want to draw a painting and put it all over the background of the page...i mean all over...
i dont want to have empty spaces - what width and height pix i need to use
?
Comment
Watch Question

Commented:
Take a look at this example:

http://s8web.com/ee/bgimgscale/ 

Make sure you resize your browser to see how the image scales at different resolutions.

Commented:
You're welcome to use it. The juicy bits are commented.

You're actually not setting the background-image, it uses z-index and css's ability to scale.

One thing to note - because of different aspect ratios, it will be impossible for you to achieve 'no empty spaces' on all displays - without stretching or semi-controlled cropping.

Commented:
Also, the centered content layout doesn't have to be that way. Just replace #container, and #content for a traditional layout.
Commented:
If this isn't the approach you're looking for, you could also use background-attachment:fixed on the body and use a large image that would cover most displays. 1680x1050 or so. This will keep the background from scrolling with the page. You will have to compress that image to try and keep it at a reasonable file size (<100k). If you position it top center, you will know that the bottom and sides will be cropped on smaller displays. You also don't want it to repeat. Choose a background color that is complimentary to your artwork.


body{
background:url('path/to/image') fixed top center no-repeat #000 /*or your color*/;
}

Open in new window

Top Expert 2011

Commented:
If your painting can repeat itself across and down the page, you have more options
http://www.download18.com/backgrounds/default.htm

try "watermark"
body
{
background-image: url("teepees.jpg");
background-attachment: fixed;
}

Open in new window


or letting it repeat across and down
body
{
background-image: url("teepees.jpg");
background-repeat: repeat;}

Open in new window