Page is a not externally linkable
- Code, Content, and Presentation
-- Site Graphics and Multimedia Design
---- Digital art, photoshop and file size


rocknbil - 7:05 pm on Jul 14, 2010 (gmt 0)


Some spanish theme, kind of like a spanish painting.


Consider carefully on two points: your primary objective is legibility. If the "painting" is too detailed, it will have heights and valleys in tone, with contrast. Overlay type onto that and it will take a serious dent in legibility.

Related, a "background" image is supposed to be just that, a background on which the subject - your text - stands. It needs to be flat in contrast and not distracting from the subject, the basic concept of dominance and subordination. So if you ghost out the image to be a good ground, you will lose detail anyway. If your background is too elaborate and contrasty, the viewer may wish one or the other - the text or the background - weren't there. Both of these play into your other questions.

If I made a painting like this, would the file be way too large to put on the website?


Being a background, no, you'd use an image the width of the column and optimize it (see below.)

Also, I don't want the painting to repeat, what do I do if the website goes down more than the painting? I was thinking of just getting a colour from the painting and blending into that colour for any lower part of the website if the height of the website exceeds the the height of the painting.


A fill is an "ok" idea, the problem comes in getting the image to blend into a web-safe tone otherwise it will form a line. Another option is to use a bitmapped format like .gif or .png and use dithering to blend to transparent.

But considering all points above, allowing it to repeat is not such a bad idea. You can feather the top and bottom of the image so wherever they might join would be a good fit - visualize sky at top, a lake or river below where the blues would blend smoothly when stacked.

.columns {
width:200px;
background #400080 url(/images/your-bg.jpg) top left repeat-y;
}


Thread source:: http://www.webmasterworld.com/graphics_multimedia/4169870.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com