Need Help Picture Fill up whole screen 10$ REWARD!!

[furrycoat]

Hello all, Im semi new to html coding, and have ran into a problem. Im trying to get a picture file to automatically fill up the webpage to the resolution of the persons computer viewing the website.

I want the picture to fill up the webpage like how html pages do. Right now its either to big or to little for the 3 computers I have tried loading the site on.
Heres my current code:

Anyone kind enough to give me the coding that will fix this problem I would like to tip 10$ via paypal. Thanks!

[pixelgrid]

set the image you want as a background for body and the background size of body to cover

body{
background:url(‘my url.jpg’);
background-size:cover;
}

have an absolute positioned img element as your site background and set its width and height to 100%

img{
width:100%;
height:100%
position:absolute;
z-index:-1;
top:0;
left:0;

}

those 2 techniques will make your photo appear streched most of the times.

you could use a plugin like bigvideo.js which calculates the windows aspect ratio as well as the pictures aspect ratio and applying margins makes the photo cover the whole page but keeping its aspect ratio.

it is also best not to offer money in a forum you see everyone is willing to help for free

[furrycoat]

Thanks for the replies. Unfortunately I cant code HTML, I dont know where to put the code you gave me. This is how my code so far

I was hoping someone could code this for me, which is why Im offering 10$ :)

[pixelgrid]

the code written above is css code and should “live” either inside and external stylesheet ( .css file ) or inside a style tag in the head section of your site.

[furrycoat]

Thanks guys for all the help! The code worked and the picture filled the screen, only problem was it only showed the top part of the picture on my monitor? Im trying to get it so for everyone who visits the image will fit entirely on their screen resolution.

Any ideas?

[Author]

Posts