Hallo
ZitatOder geht das nicht?
Doch, das geht.
Allerdings befürchte ich, dass du noch vollkommen falsche Vorstellungen über die Erstellung einer Webseite hast und dir eine Lösung deshalb nicht unbedingt weiterhelfen wird. Lösungen können nur im Gesamtzusammenhang funktionieren und deine Seite soll wahrscheinlich noch mehr Informationen enthalten.
Mit deinen bisherigen Informationen könnte eine Lösung zum Beispiel so aussehen.
Das HTML:
Code
<body>
<header>
<figure>
<img src="http://www.projektwoelke.lima-city.de/bilder/ueberschrift.jpg" alt="Logo Fahrradhandel">
</figure>
</header>
</body>Das entscheidende CSS:
Code
@media all {
figure {
margin: 0;
}
img {
/*text-align: bottom;*/
display: block;
min-width: 0;
max-width: 100%;
max-height: 100vh;
border: 0;
}
}
@media all {
body {
height: 100%;
min-height: 100vh;
padding: 2vw;
}
body>header {
background-image: url(http://www.projektwoelke.lima-city.de/bilder/blank.png);
background-size: 100% 100%;
position: relative;
/*width und height müssen den Proportionen des background-image entsprechen*/
width: 96vw;
height: 64vw;
border-top: 1px solid transparent; /*Collapsing margins*/
}
figure:nth-child(1) {
position: absolute;
width: 20%;
left: 10%;
top: 19.3%;
}
}Und eine gesamte Seite, deren Quellcode eins zu eins übernommen werden kann:
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Grafik anordnen 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->
<style>
/*Meine persönlichen Grundeinstellungen für alle Seiten*/
@import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
@media all {
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-family: Sans-Serif;
font-size: 120%;
}
body {
margin: 0;
}
}
/* ==================================================== */
/* ***Ab hier beginnen die Angaben zur Problemlösung*** */
/*Spezielle Einstellungen*/
/*Grafiken*/
@media all {
figure {
margin: 0;
}
img {
/*text-align: bottom;*/
display: block;
min-width: 0;
max-width: 100%;
max-height: 100vh;
border: 0;
}
}
@media all {
body {
height: 100%;
min-height: 100vh;
padding: 2vw;
}
body>header {
background-image: url(http://www.projektwoelke.lima-city.de/bilder/blank.png);
background-size: 100% 100%;
position: relative;
/*width und height müssen den Proportionen des background-image entsprechen*/
width: 96vw;
height: 64vw;
border-top: 1px solid transparent; /*Collapsing margins*/
}
figure:nth-child(1) {
position: absolute;
width: 20%;
left: 10%;
top: 19.3%;
}
}
/* *** Ende der Angaben zur Problemlösung*** */
/* ===================================================== */
/* Vorlage zum Kopieren für Media Queries */
@media only screen and (max-width: 0px) {
}
</style>
</head>
<body>
<header>
<figure>
<img src="http://www.projektwoelke.lima-city.de/bilder/ueberschrift.jpg" alt="Logo Fahrradhandel">
</figure>
</header>
</body>
</html>Siehe auch:
https://www.html.de/threads/pr…bei-positionierung.55666/
Gruss
MrMurphy