Jump to content

How to enlarge picture on whole screen?


webrimor
 Share

Recommended Posts

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

Edited by webrimor
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...