• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hintergrundbild an Auflösung anpassen

H

Hanswurst

Neues Mitglied
Hallo Freunde,

das Thema wurde schon oft behandelt. Doch keine der in der Suche angezeigten Lösungen konnte mir wirklich helfen.

Mein Hintergrundbild wiederholt sich ab einer bestimmten Bildschirmauflösung. Ich möchte das Bild nun nicht verzerren, sondern stattdessen das hintergrundbild zentrieren und links und rechts einen kleinen schwarzen Rand darstellen.

Als Schwierigkeit kommt dazu, dass Bilder mit Links zu Unterseiten an bestimmten Positionen auf dem Hintergrundbild angeordnet sein müssen.

Meine html.Kenntnisse sind leider sehr eingeschränkt, css und andere Skripte sind eher ein rotes Tuch für mich. Die komplette Seite wurde mit Codefetzen aus dem Internet aufgebaut.

penny-cards.com

Das ist der aktuelle Code:

<html>

<head>
<meta name="GENERATOR" content="irfanview">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>
</title>
<script type="text/javascript">
window.defaultStatus="Juhu";
</script>

<style type="text/css">
<!--


/* Höhen- und Breitenanpassung zu 100%; Scrollbar ausblenden */
body, html{ width: 100%;
height: 100%;
overflow: hidden;}

//-->
</style>
</head>

<body background="Penny Cards Gazette.png" width="100%" height="100%"
onselectstart="return false" ondragstart="return false"
oncontextmenu="return false" oncontext="return false">

<div style="position:absolute; top:293px; left:113px;"><a href="199394">
<img src="1993-94.png" width="79" height="22" border="0"></a></div>
<div style="position:absolute; top:317px; left:114px;"><a href="199495">
<img src="1994-95.png" width="77" height="20" border="0"></a></div>
<div style="position:absolute; top:337px; left:114px;"><a href="199596">
<img src="1995-96.png" width="77" height="23" border="0"></a></div>
<div style="position:absolute; top:361px; left:114px;"><a href="199697">
<img src="1996-97.png" width="77" height="22" border="0"></a></div>
<div style="position:absolute; top:383px; left:115px;"><a href="199798">
<img src="1997-98.png" width="76" height="21" border="0"></a></div>
<div style="position:absolute; top:406px; left:115px;"><a href="199899">
<img src="1998-99.png" width="77" height="21" border="0"></a></div>
<div style="position:absolute; top:428px; left:116px;"><a href="199900">
<img src="1999-00.png" width="76" height="20" border="0"></a></div>
<div style="position:absolute; top:449px; left:116px;"><a href="200102">
<img src="2001-02.png" width="74" height="20" border="0"></a></div>

<div style="position:absolute; top:474px; left:103px;"><a href="Auto">
<img src="Auto.png" width="101" height="24" border="0" ></a></div>
<div style="position:absolute; top:499px; left:132px;"><a href="Masterpieces">
<img src="Masterpieces.png" width="32" height="22" border="0"></a></div>
<div style="position:absolute; top:519px; left:116px;"><a href="Jersey">
<img src="jersey.png" width="78" height="28" border="0"></a></div>
<div style="position:absolute; top:547px; left:115px;"><a href="">
<img src="Oddball.png" width="75" height="20" border="0"></a></div>


</body>
</html>

Vielen Dank für euren Rat!

LG

Ronald
 
Zuletzt bearbeitet:
Was Du willst, kannst Du mit HTML alleine nicht erreichen. Für die Darstellung ist immer CSS zuständig.

Mit CSS kannst Du ein Hintergrundbild mit background-position zentrieren. Mit background-repeat kannst Du steuern, ob und in welcher Richtung der Bild wiederholt werden sollte. Wenn Du links und rechts eine Farbe darstellen willst, dann musst Du bei dem Element dem Du das Hintergrundbild zugeordnet hast auch eine Hintergrundfarbe angeben.

Beispiel:
Code: 
body {
 background-image: url(Penny_Cards_Gazette.png);
 background-position: top center;
 background-repeat: no-repeat;
}

Hinweis: auf Leer- und Sonderzeichen in Dateinamen sollte man verzichten.
 
Vieler Dank für deine Antwort! Meine Kenntnisse sind wirklich sehr sehr bescheiden? Kann ich die Bilder zu den Verlinkungen trotzdem absoluten Positionen zuordnen, sodass diese dann auch an exakten Positionen auftauchen? Wie würder der Header dazu aussehen?
 
Wenn du Elemente absolut UND in Relation zur Hintergrundgrafik positionieren willst, empfielt es sich, das Layout rechts statt zentriert auszurichten.
Das erleichtert das Unterfangen ;)
 
Vielen Dank für die Antworten. Leider bekomme ich es noch immer nicht hin. Wie müßte ich denn den bestehenden abwandeln, wenn ich "no-repeat" einfügen möchte?
 
Hallo ich habe das gleiche Problem :)

Ich möchte das die Darstellung der Seite an die versch. Auflösungen angepasst wird.
Wie kann ich das am besten realisieren?

Ich habe mal 2 Screens hochgeladen einmal wie es bei mir aufsieht bei 1920x1080
Und einmal bei einem Netbook.

Ich denke ein großer Fehler wird sein das ich so große Bilder hochgeladen habe.
Der Background hat 2000x2000px
Und das Bild Links hat 560x200px

Ich danke euch für eure Hilfe :)




 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben