Home/ Questions/Q 7091671
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T08:12:55+00:00

I am trying to build a website with a background image that I want

  • 0

I am trying to build a website with a background image that I want to always fill up the entire screen.

When the browser window is short and wide, I want the image to expand so that the top part of it fills up the entire screen length-wise and the rest of it is not visible.

When the browser window is tall and thin, I want the image to expand so that the left part of it fills up the entire screen height-wise and the rest of it is not visible.

Using the CSS3 background-size: cover property makes the former work like a charm, the latter does not. Instead, the background image is shrunk so that it is entirely visible within the narrow region available and scaled to the width, and then the rest of the page below it is simply the background color.

body {
    background-color: #BF6F30;
    color: black;
    font-family: Georgia, "Times New Roman", sans-serif;
    background: url(' ... ');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

How can I fix this problem?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Are you interested in only using a CSS background image? This can be done by loading an image and constraining it with the CSS.

    Would either of these examples work?

    HTML

    <body id="page-body">
<img class="bg" src="images/bodyBackground1.jpg">
<div class="wrapper">


</div>
</body>

    CSS

    html {
        background: url(images/bodyBackground1.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

body {
    background:#fff;
    margin: 0;
    padding: 0;
    overflow:hidden;
}

html, body {
    height: 100%;
}

img.bg {
        /* Set rules to fill background */
        min-height: 100%;
        min-width: 1024px;

        /* Set up proportionate scaling */
        width: 100%;
        height: auto;

        /* Set up positioning */
        position: fixed;
        top: 0;
        left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
        img.bg {
                left: 50%;
                margin-left: -512px;   /* 50% */
        }
}

    Or this one? This one loads images from a database into an array and loads them at random, but you might be able to glean some info from this:

    PHP load function

    <?php
    $bg_images = array(
        0 => 'comp1.png',
        1 => 'comp2.png',
        2 => 'comp3.png',
        ....
    );
    $image = $bg_images[ rand(0,(count($bg_images)-1)) ];
    $showBG = "<img class=\"source-image\" src=\"images/bg/" . $image . "\"/>";
?>

    HTML

    ...
<body>
<?php echo $showBG; ?>
<div id="wrapper">
...

    CSS

    html, body {
    margin:0;
    height:100%;
}

img.source-image {
    width:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:0;
    min-width:1024px;
}

    These options should fill up the browser window according to the height and width.

    • 0