css stretch background image with top and bottom padding

css background-image margin padding

11,812

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;
}

11,812

Author by

dreamerkumar

Expert in Javascript/Typescript based web development with Frameworks like Angular, React, Node and MongoDB on Cloud Infrastructure. 2 decades of work on varied technologies at companies like Delta Air Lines, ADP, Deloitte, VMWare, Anthem, State Farm Insurance, CarMax etc.. Speaker at Official Angular Conference (Ng-Conf) 2020 Speaker at AI Conference 2017 (Atlanta DataSciCon.Tech 2017) Udemy instructor on Javascript with 40k+ students Started career in Full Stack Development on Microsoft Technologies from the earliest version of .Net. Later grew interest in Javascript based development gaining expertise on Backend with Node, and Front End development using frameworks like Angular, React, ExtJS, Knockout and jQuery etc Interests in the AI revolution through cutting edge projects on Reinforcement Learning and organizing and giving talks at local Meetups and Conferences. Interest in complex algorithms or solving difficult problems with code. Creator of IBModeler, featured in prominent gaming magazine "3D World": software to create 3d models from photos. Open sourced on GitHub: https://github.com/dreamerkumar/ibmodeler3 Github: https://www.github.com/dreamerkumar https://www.dreamerkumar.com

Updated on June 04, 2022

Comments

dreamerkumar almost 2 years
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; 
```
dreamerkumar almost 12 years

Thank you. Your answer served me just right because I already had the header and footer at a higher z-index. Guess going the img route is the easier solution. Still wonder though if we can apply bottom padding or margin to a background image.