Html Coding ... how can I get my background image to stretch, instead of appear tiled? Codes? Thank you.?

Question

I am a gr.9 student.

Answer 1

HTML and CSS don't have have background size property.
CSS3 does have a background size property, but it's not supported by many browsers.

About.com offers a tutorial on how to fake a stretched background:
http://webdesign.about.com/od/css3/f/blfaqbgsize.htm

With that said, stretched backgrounds look pretty bad. The image is distorted and looks pixelated. You might consider fitting the image to an area with a matched, fixed dimension.

The background image has to be the same size as the area it is filling in order for it to consume the total object area. Set the CSS code to "background-repeat: no-repeat;" in this case.

The image will tile if you use the CSS code "background-repeat: repeat;"

To repeat the background horizontally but not vertically:
background-repeat: repeat-x;

To repeat the background vertically but not horizontally :
background-repeat: repeat-y;

Answer 2

There isn't a setting to stretch a background. There are settings to tile, tile horizontally, tile vertically and not tile, and whether it stays in position or not.

Stretching would require Javascript (or similar) to place the image behind your content and size it to the user's display.

Answer 3

You have your answer above.
But you miss the point!
WEB RULE NUMBER ONE:
"You have 0.5 second to "catch" your visitor. More than that, and you loose him forever."
A background image (to cover the whole of the screen) will have to be bigger than the max resolution you can think of, and that makes a file (even jpeg) HUGE, that will require a long-long-long time to download.
NEVER use a background image for your "home" page (except a "color" or a very-very-very small pattern)

Answer 4

because of the fact the previous guy or woman pronounced, you could basically try this by employing employing CSS. place right here interior the pinnacle tags /type

Answer 5

This will look better if you use a larger image:

body {
background-image:url(IMAGE URL);


background-repeat:no-repeat;
}