How to enlarge picture on whole screen?

[webrimor]

I want to use an image as background. If size of the picture is smaller than screen, then picture is not streched to fit to the screen size, but repeats the image again.How do i fit the background image to the screen size in HTML?Thanks

[real_illusions]

You cannot stretch or alter a background image on the fly.Simple as that really

[jeffman]

What you can do is use a normal <img> element and take it out of the document flow with absolute positioning. If it is the first element on the page, it will lie behind everything else.There is a limit to the way CSS will resize an image. The following might work, but it has a restriction:

img.myImage {   potision: absolute;   top: 0px;   left: 0px;   width: 100%;   height:100%;}

You'd think this would cause the image to fill 100% of the container object, which in your case would be the body. In fact, only the longest dimension will size to 100%. The shorter dimension will be sized according to the original proportions. That dimension will be bigger, but it will not fill the whole space. Maybe that's what you want.If not, you'll need some JavaScript. Try the CSS solution first. See if that's what you have in mind.

[webrimor]

What you can do is use a normal <img> element and take it out of the document flow with absolute positioning. If it is the first element on the page, it will lie behind everything else.There is a limit to the way CSS will resize an image. The following might work, but it has a restriction:

img.myImage {   potision: absolute;   top: 0px;   left: 0px;   width: 100%;   height:100%;}

You'd think this would cause the image to fill 100% of the container object, which in your case would be the body. In fact, only the longest dimension will size to 100%. The shorter dimension will be sized according to the original proportions. That dimension will be bigger, but it will not fill the whole space. Maybe that's what you want.If not, you'll need some JavaScript. Try the CSS solution first. See if that's what you have in mind.

Thank you, but it's not work. Is it no solution in HTML?

[dsonesuk]

just been through this, with this post background helpmight have a problem with misspell should beimg.myImage { position: absolute; top: 0px; left: 0px; width: 100%; height:100%;z-index:-1; /*added in previous post*/}

[jeffman]

There is no HTML solution. HTML is not designed to control presentational features like image size.Please explain what you mean when you say something did not work. I cannot tell if the solution has an error, or if you used it incorrectly, or if if it works the way it is supposed to and you just don't like it.