CODEWITHSUNDEEP
htmlcss
Alex Smith
Alex Smith

Reputation: 23

My background image keeps getting cut off at the bottom?

This isn't a duplicate, I've looked at similar questions and tried their solutions but nothing has worked. Half my image keeps getting cut off, other solutions have just centered it but it didn't strech across the page like I wanted it to without being distorted, any ideas on what's wrong?

html

<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="mainPage.css"/>
</head>
<body>

<div id="header">


 </div>

 <div id="body">

 </div>

 <div id="footer">

 </div>

 </body>
 </html>

css

body{width: 100%;
    margin:0px;
    padding:0px;
      }




#header{
    height:2300px;
    background-color:pink;
    background-image: url("http://horoscopespot.net/wp-  content/gallery/pisces/pisces-shadow.jpg");
    background-repeat: no-repeat;
    background-size:cover;

    }

Upvotes: 1

Views: 542

Answers (3)

Abdulla Nilam
Abdulla Nilam

Reputation: 38584

Use this in body tag

body
{
    background: url(http://horoscopespot.net/wp-content/gallery/pisces/pisces-shadow.jpg) no-repeat fixed top center;
}

Upvotes: 0

The Well
The Well

Reputation: 884

This should work:

background-size: cover;

Add this to your css.

Upvotes: 0

Abhishek Dey
Abhishek Dey

Reputation: 1639

Add margin-bottom:10px; or padding-bottom:10px;

Also, background-size: 100% 100% can help.

Upvotes: 1

Related Questions