# Background stretch problem in IE7

**URL:** <https://forum.kirupa.com/t/background-stretch-problem-in-ie7/287455>\
**Category:** web dev\
**Created:** [May 1, 2009, 10:54am UTC](https://forum.kirupa.com/t/background-stretch-problem-in-ie7/287455 "2009-05-01T10:54:33Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![revelations1318](https://avatars.discourse-cdn.com/v4/letter/r/8c91f0/32.png) [@revelations1318](https://forum.kirupa.com/u/revelations1318)\
**Post date:** [May 1, 2009, 10:54am UTC](https://forum.kirupa.com/t/background-stretch-problem-in-ie7/287455/1 "2009-05-01T10:54:33Z")

</div>

I’m playing with a layout for a client ([www.chirho.co.uk/k666new](http://www.chirho.co.uk/k666new)) but I’m getting annoying issues with IE7. All I’ve done so far is a container div with a repeating png background and a header div with a background png.

It looks fine in Firefox and Safari. It also validates as XHTML Strict and CSS 2. But when I look at it in IE7 the background png of the container div is stretched, and the header div isn’t positioned properly.

Here’s my css

```auto
body {
margin: 0px;
padding: 0px;
background: #a0a0a0;
text-align: center;
}

#container {
margin: 0px auto;
width: 1000px;
height: 1000px;
background: transparent url(../img/background.png) top center repeat-y;
}

#header {
width: 100%;
height: 242px;
background: transparent url(../img/header.png) top center no-repeat;
}

#header img {
width: 100%;
height: 100%;
border: 0px;
}

```

and XHTML

```auto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Kreepsville 666</title>

<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<meta name="keywords" content="kreepsville, 666, zombie, rockabilly, horror, scary, gothic, dead, murder" />
<meta name="description" content="Go to your graveyard. Find a zombie. Ask him where he got his cool and kitsch clothing. From Kreepsville 666!" />
<meta name="author" content="ChiRho" />

<link rel="stylesheet" type="text/css" href="inc/main.css" media="screen" />

<script src="inc/FancyZoom.js" type="text/javascript"></script>
<script src="inc/FancyZoomHTML.js" type="text/javascript"></script>
<script src="inc/supersleight-min.js" type="text/javascript"></script>
<script src="inc/supersleight.js" type="text/javascript"></script>

</head>

<body>

<div id="container">

<div id="header">
<a href="#"><img src="img/x.gif" alt="Kreepsville 666" /></a>
</div>

</div>

</body>

</html>

```

Any thoughts?
