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.8);
}
/*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?