Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Need Help Picture Fill up whole screen 10$ REWARD!!

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #45965
    furrycoat
    Member

    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:





    Untitled Document




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

    #140968
    pixelgrid
    Participant

    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

    #140980
    furrycoat
    Member

    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$ :)

    #140983
    pixelgrid
    Participant

    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.





    title





    #140994
    furrycoat
    Member

    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?

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.