Images & CSS – Resizing window makes it messy

Hi,

I have a banner for a webpage within a container. code is below:

body {
font-size: 75%;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#E8E8E8;
padding: 25px 139px 25px 139px;
color:#464646;
}

.banner {
background: #888995 url(image.gif);
background-repeat:no-repeat;
width:100%;
height:120px;
background-position: 0% 100%;
float:right;
padding:0px;
border-bottom:1px solid #AAAAAA;
}

.box {
background-color: #FFF;
border: 1px solid #AAAAAA;
}

HTML CODE
————-

<div class=”banner”></div> <!– within box div –>

When window is resized, the image is just cutoff and looks really messy.
Has anyone any ideas on how to get around this?

I have tried specifying the width of the image in pixels…

Thanks for any tips

Also in #CSS _↴