I just started my Website with an Background Picture that Looks like a wall beeing stamped from behind with my logo. Everything works good and the Picture gets smaller when I make the Browser smaller and vice versa. Will say you always see the full Background Picture. But now I want to realize the Navigation with signs pinted on the wall. One is for "About us" one for "Impressum" and so on. I.e. I added just a vellow sign for example. The Problem now is that everytime I change the browser size (like written before) the signs do not keep on place an also the do not Change their size. Has anyone an idea how to get out of this Trouble. I do not know if CSS is all I need or do I also need any Divs or Selections, scripts or what (working with HTML5)? Here is the code and you can see the blamage on www.keep-at-it.eu Michael
<!DOCTYPE html>
<html>
<head>
<title>
Keep at it
</title><!-- <sonderzeichen ermöglichen -->
<meta charset="UTF-8">
<meta name="keywords" content="Keep at it, Individuelle Programmierung, MongoDB,The beast behind my beauty"><!--<link rel="stylesheet" href="..\CSS\Background.css" type="text/css" media="screen"/> </link>-->
<style type="text/css" media="screen">
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: 100%;
/* Set up positioning */
position: fixed;
top: 0px;
left: 0;
}
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
img.sc {
position:absolute;
width:30px;
height:10Px;
top:30%;
left:10%;
margin-left:64.5px;
}
</style>
</head>
<body>
<img src="../Bilder/Coming%20soon2.jpg" class="bg" alt="Background">
<img src="../Bilder/Schild.jpg" class="sc">
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire