XHTMLforum - Logo in Header dupliziert sich beim verkleinern des Browserfensters

ich habe ein Problem, in meinem Header habe ich ein jpg als Logo eingefügt welches sich beim verkleinern des Browser Fenstert verdoppelt/dreifacht ich möchte eigentlich nur eine einzige korrekt auf der linken Seite plazierte Version davon. kann mir evtl. jemand helfen?

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf=8"/>
<Title> Dängeli und Partner </title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="navigation">
<div class="wrapper">

<div id="logo"></div>
<p id="menu">
<a href="#"> Home</a>
<a href="#"> Über uns</a>
<a href="#"> Referenzen</a>
<a href="#"> Leistungen</a>
<a href="#"> Kontakt</a>
</p>
</div>
</div>

<div id="banner">
<div class="wrapper">
<img src="Pictures/blau.jpg" alt="Naturfarben Pigmente" style="float:right">
<h1> Malerbetrieb für Naturfarben </h1>

<p>Seit 40 Jahren verarbeitet unser Familienbetrieb natürliche, mineralische und wohngiftfreie Farben und Putze.
.........

und so weiter

der Css teil sieht so aus an den betreffenden stellen so aus:

{
margin: 0;
padding: 0;

font-family: Helvetica;
}
.wrapper {
width: 1280px;
max-width: 90%;
margin: 0 auto;
float: center;

}
/* NAVIGATION */

#navigation {

position: fixed;
top: 0;
z-index: 10;

height: 138px;
width: 100%;

background-color:rgba(250, 250, 250, 0.;

}

/*Logo*/

#logo {

width: 45%;
height: 110px;
opacity: 0.8;
float: left;

Background:
url(Pictures/logo.jpg);
background-size: contain;

}
/*MENU TEXT*/

#menu {
width: 45%;
float: right;
margin-top: 50px;

}

#menu a {

padding-right: 25px;
padding-top: 25px;
text-decoration: none;
color: #B40B0B;
text-align: 2em;
font-weight: 600;

}

#menu a:hover {
border-top: solid white 4px;
color: #4FCDEC;
}

ist der Aufbau falsch oder muss ich noch irgend einen Fix css code einfügen?