CODEWITHSUNDEEP
htmlcssbackground-image
bircastri
bircastri

Reputation: 2165

How to set background image to full screen

I want to set a background Image into my html page.

So I have this code:

body{
   background: url("background_image.jpg") no-repeat scroll center center / 100% auto;
}

This is my HTML page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link type="text/css" rel="stylesheet"  href="css/style.css" />
</head>
<body>



</body>
</html>

So with this code, the background image doesn't fill the screen.

I want to display the image at full width and height

Upvotes: 1

Views: 14583

Answers (2)

Road Name
Road Name

Reputation: 129

try this css: 

body{
   background: url("background_image.jpg") no-repeat scroll center top / cover auto;
}

hope that helps !

Upvotes: 0

Luthfi Noviandi
Luthfi Noviandi

Reputation: 96

Try using this css code :

body{
  background: url(backgroud-image.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

or

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

Upvotes: 5

Related Questions