Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jun 2006
    Posts
    73
    Thanks
    2
    Thanked 1 Time in 1 Post

    Trying to get background image to fit..

    I am trying to get my background image to fit screen without stretching it.
    My image rotates every time my website is shown.

    Any help would be greatly appreciated.

    Code:
    body {
    height: 100%;
    margin: 0; 
    padding: 0;
    }

    Code for background image.
    Code:
    #page-background {
    height: 100%;
    left: 0;
    position: fixed; 
    top: 0;   
    width: 100%;
    }

    Code for background image to rotate..
    Code:
    <div id="page-background">
    <?php
    //Add as many links you want
    $mylink[1] = '<img src="http://www.zarias.com/wp-content/uploads/2015/12/61-cute-puppies.jpg" width="100%" height="100%">
    <div id="download">
    <a href="images/more.png" title="Download this image. Use of this image is restricted to wallpaper only"download>* Download This Image *</a>
    </div>';
    // this will count your links itself and select a random one
    $id = rand(1,count($mylink));
    // this will display the random link
    echo $mylink[$id];
    ?>
    </div>

  2. #2
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,098
    Thanks
    4
    Thanked 448 Times in 437 Posts
    First it might help if you used background-image in the CSS if you want a background-image, since <img> is for CONTENT IMAGES, NOT presentational images.

    Then you can try the various background-size properties such as 'cover'.

    GENERALLY this is why something like a background image would not be set in the markup, it really has no place there... but if you INSIST this is one of the FEW times I would advocate using the style="" attriibute.

    Code:
    <body style="background-image:url(<?= $mylink ?>);">
    Then in your stylesheet:

    Code:
    body {
      background-position:fixed;
      background-size:cover;
    }
    Mind you, 'cover' will expand it to fill the entire display aspect correct, chopping off any excess. If you want it to expand to fit without filling the entire screen, use background-size:contain; instead.

    Though given these are image downloads... well, I'm not sure why you'd be displaying it as the background instead of as a thumbnail, then having a separate preview of the image.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •