CODEWITHSUNDEEP
htmlcssbackground
BaBar Miamor
BaBar Miamor

Reputation: 95

Place Background Behind Header

I have a background I am trying to place behind my header, but I am having trouble.

All my content is sitting behind the background.

Can anyone give me some insight on what I am doing wrong or missing?

* {
  box-sizing: border-box;
}

.header {
  background-color: white;
  color: #36363F;
  height: 600px;
  padding: 15px;
}
<div class="header">
  <h1>GETUWIRED</h1>
</div>
<div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
  <img src='http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg' style='width:100%;height:100%' alt='[]' />
</div>

Upvotes: 1

Views: 5091

Answers (4)

Renu
Renu

Reputation: 1

@babar-miamor

Please try changing class container property as below

margin: 0px;
padding: 0px;
height: 100%;

Hope it help.

Upvotes: 0

Key Shang
Key Shang

Reputation: 917

You should not use img tag as background, you should use css background instead. You could learn css background from here https://developer.mozilla.org/en/docs/Web/CSS/background

In your case, you should rewrite your codes like below. Make use of the body css background.

I adjust the header height to 110px, because before is too high.

 <!DOCTYPE html>
 <html>
 <head>
    <style>
        * {
            box-sizing: border-box;
        }
        .header {
            background-color: white;
            color: #36363F;
            height: 110px;
            padding: 15px;
        }
        body {
            background-image: url('http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg');
            background-size: 100% 100%;
            background-position: 0 0;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>GETUWIRED</h1>
    </div>
</body>
</html>

Upvotes: 0

dippas
dippas

Reputation: 60543

A few ways to do this:

  • using css background in body (or html) - recommended 

* {
  box-sizing: border-box;
}

body {
  background: url(http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg);
}

.header {
  background-color: white;
  color: #36363F;
  height: 600px;
  padding: 15px;
}

img {
  width: 100%;
  height: 100%
}
<div class="header">
  <h1>GETUWIRED</h1>
</div>

  • z-index negative

Use z-index: -1 instead of z-index:0 in the element with background.

Also you can use the image as a background instead of img element, to have a semantic meaning.

* {
  box-sizing: border-box;
}

.bg {
  background: url(http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg);
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%
}

.header {
  background-color: white;
  color: #36363F;
  height: 600px;
  padding: 15px;
}

img {
  width: 100%;
  height: 100%
}
<div class="header">
  <h1>GETUWIRED</h1>
</div>
<div class="bg">

</div>

Note Avoid using inline styles, they are a bad practice.

Upvotes: 3

Asons
Asons

Reputation: 87191

Since you are stretching the image across the whole viewport, may I suggest you add it as a background-image on the body instead. It will give you a cleaner markup.

<!DOCTYPE html>
    <html>
    <head>
    <style>
    * {
    box-sizing: border-box;
    }
    
    body {
      background: url(http://www.getuwired.com/devtest/Death_to_stock_photography_Vibrant.jpg) center no-repeat;
      background-size: cover;
    }
    
    .header {
        background-color: white;
        color: #36363F;
	    height: 600px;
        padding: 15px;
    }

    </style>
    </head>
    <body>

    <div class="header">
       <h1>GETUWIRED</h1>
    </div>

    </body>
    </html>

Upvotes: 1

Related Questions