CODEWITHSUNDEEP
htmlcss
Lahey
Lahey

Reputation: 231

Background-image of body does not repeat to viewport

My website has a background that is composed of two images.

html{
height:100%;
margin:0;
padding:0;
background-image:url('../images/backgroundbottom.png');
background-repeat:repeat-x;
background-position:bottom;
}
body{
height:100%;
margin:0;
padding:0;
font-family: "arial", "times", "courier";
font-size: 10pt;
color:white;
background-image:url('../images/backgroundtop.png');
background-repeat:repeat-x;
}

The body background does not adapt to the dynamic environment of my website like the html does. The body background stops repeating at the right side, but the html extends to the entire viewpoint. I have tested this in Chrome, FireFox, Android and Safari.

The html and body elements do not fill the viewport. This issue is most likely being caused by a div that is pushing to the right side with a position:absolute.

How do I work around this issue?

Upvotes: 1

Views: 245

Answers (1)

Relentless
Relentless

Reputation: 122

Try adding background-attachment:fixed;

background-repeat:x;
background-attachment:fixed;
background-position:bottom;

Upvotes: 1

Related Questions