CODEWITHSUNDEEP
css
user1815176
user1815176

Reputation: 90

How to make a background image the entire page

How can I make a background image the entire page height. I got the width, but not the height. Here is my code.

<! DOCTYPE html/>
<html>
<head>
<title> Singapore! </title>
<style>

*

{
  margin:0px;
  padding:0px;
}


div.background

{

  background: url('singaporebackground.jpg');
  background-size: 100% auto;
  height: 1000px;
  padding-top: 50px;

}

div.transbox

{

  margin: 0px 225px; 
  width: 60%;
  height: 100%;
  background-image: linear-gradient(top, rgb(255,255,255) 24%, rgb(130,130,130) 39%, rgb(0,0,0) 81%);
  background-image: -o-linear-gradient(top, rgb(255,255,255) 24%, rgb(130,130,130) 39%, rgb(0,0,0) 81%);
  background-image: -moz-linear-gradient(top, rgb(255,255,255) 24%, rgb(130,130,130) 39%, rgb(0,0,0) 81%);
  background-image: -webkit-linear-gradient(top, rgb(255,255,255) 24%, rgb(130,130,130) 39%, rgb(0,0,0) 81%);
  background-image: -ms-linear-gradient(top, rgb(255,255,255) 24%, rgb(130,130,130) 39%, rgb(0,0,0) 81%);
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.24, rgb(255,255,255)),
    color-stop(0.39, rgb(130,130,130)),
    color-stop(0.81, rgb(0,0,0)));

  border-top: 5px solid black;
  opacity:0.4;
  filter:alpha(opacity=40); /* For IE8 and earlier */
}

div.transbox p

{
  margin: 30px 40px;
  font-weight: bold;
  color: #000000;
}

</style>
</head>
<body>

<div class="background" />
<div id="header" />
<!--<img src="finishedsingaporelogo.jpg" /> -->
</div>
<div class="transbox" />
<p> Content </p>
</div>
</div>

See my background image is full width, but it repeats it's height. I have tried no-repeat, but it just leaves a white space please help

Upvotes: 2

Views: 289

Answers (1)

Blender
Blender

Reputation: 298582

You can absolutely position it and use background-size: cover:

div.background {
  background: url('singaporebackground.jpg');
  background-size: cover;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

Demo: http://jsfiddle.net/gWQv4/

Upvotes: 2

Related Questions