Home/ Questions/Q 8243643
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T21:35:06+00:00

I want the background image for a page to stretch to the full width

  • 0

I want the background image for a page to stretch to the full width and height. The challenge here is that it should leave out an area of 48 px at the top as well as at the bottom (those are header and footer areas and we don’t want this image to hide behind that). Also, I am trying to do it with css only (no javascript or client side code). CSS3 is ok.

Here is where I am so far. I have been able to get the top margin:

 background-image: url('images/image1.png')
background-repeat: no-repeat;
background-attachment:fixed;
background-position:  center 48px;  
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Instead of using background-size, I would make a div with an image inside of it, and position it absolutely to the window, and then position everything you want on top of it relative, with a higher z-index. Background-size css property is not supported in the earlier versions of IE, only IE9+. Here is a tiny example:

    <body>
    <div class="bg-image">
        <img src="images/image-1.png" />
    </div>
    <div class="content">
        <p>this is your content</p>
    </div>
</body>

    Then for CSS:

    .bg-image {
    position: absolute;
    width: 100%;
    height: auto; /*or 100%*/
    z-index: 1;
    padding: 48px 0px;
}

.bg-image img {
    width: 100%;
    height: 100%;
}

.container {
    position: relative;
    z-index: 2;
    top: 0px;
}
    • 0