Skalierter Hintergrund

[GSR]

Hallo miteinander,

ich bastele aktuell an einer Website, bzw. einem benutzerdefinierten Tumblr-Blog. Bin noch relativ am Anfang, will heißen: beim Hintergrund der Seite.
Ich möchte dazu gerne dieses Bild verwenden: http://www11.pic-upload.de/13.09.14/uf6ifv88c9u2.jpg
Die URL der Website lautet http://maisondunotricks.tumblr.com/, da könnt ihr sehen, wie das aktuell aussieht.

Mein Problem ist folgendes:
Ich würde den Hintergrund gerne skalieren, so dass das komplette Bild angezeigt wird. Das klappt ja aktuell noch nicht ganz, wenn man sich die Website anschaut. Habe das Bild gerade über die Bearbeitungsfunktion meines Templates eingefügt, Style ist "Center". Hatte es auch mit dem Code aus diesem kurzen Tutorial probiert, allerdings war das Bild da noch stärker "rangezoomt", so dass auch nicht alles angezeigt wurde.
Gibt es eine andere Möglichkeit, eine Skalierung zu bewerkstelligen, so dass es in jedem Browser und jeder (gängigen) Bildschirmauflösung komplett angezeigt wird?

Darauf aufbauend vielleicht noch eine Frage:
Ich möchte anschließend vier Buttons als Navigation auf der Landing page platzieren, darüber soll der Header zu sehen sein, durch den man immer wieder auf die Landing page zurück kommt (von jeder der vier Unterseiten aus). Das Ganze soll ungefähr so aufgebaut sein:

Bekomme ich es irgendwie hin, dass die Buttons und der Header immer im relativ selben Abstand und der selben Position zum Hintergrund angezeigt werden, egal mit welcher Auflösung man die Website gerade besucht?


Ich bedanke mich schon mal für eure Antworten!

 

[GSR]

Kleines Update:
- Habe den Hintergrund jetzt gesetzt, Größe beträgt 1920 x 1080 px: http://www11.pic-upload.de/13.09.14/hdx64wxo9wgn.png
- meine 4 Buttons sind ebenfalls fertig, jeweils 85 x 126 px groß und sind hier zu finden: http://www.pic-upload.de/gal-680570/ds1zo/1.html Ich würde die Buttons jetzt gerne im weißen Bereich auf dem Bild (also zwischen den Häusern oben und dem Himmel unten) platzieren. Bin dabei auf diese Seite gestoßen, die wohl grob das beschreibt, was ich machen will: http://de.selfhtml.org/html/grafiken/verweise.htm

Aber wie bekomme ich die Buttons jetzt genau an diese Stelle der Landing page?

Anbei noch der Code meiner Seite (bzw. der aus dem Template):
http://www.file-upload.net/download-9521796/Code.txt.html

 

[Flemli200]

Ich weiß, das des nicht unbedingt die beste Methode ist, weil das Bild bei wirklich großen Auflösungen wahrscheinlich verpixelt.
Aber hast du mal versucht das Bild mit einer breite von 100% einzufügen und nach links oben auszurichten?
Dann passt es sich an den content an.

Könntest auch 3 Bilder daraus machen welche jeweils auf die viewportgröße angepasst sind und bei kleiner, mittlerer und großer Auflösung geladen werden. Das solltest du über "@media" im css schaffen.

 

[Flemli200]

Was die buttons angeht, Legst du einen div drumrum und positionierst ihn via CSS in der Mitte (margin).
Dann kannst du entweder die buttons alle mit einer class ansprechen und sie automatisch positionieren. Position: relative; float: left; und dann mit margin die Abstände bis es passt (kannst hier auch mit :first-child und :last-child arbeiten)
Oder du positionierst jeden einzelnen absolut, wovon ich aber abrate, wenn du in Zukunft Anpassungen machen möchtest. (Es sei denn du benutzt einen preprozessor wie bsp. Lesscss)

Das sollte klappen.
So kannst du das ganze dann mit ein zwei Dingen, welche du beachten musst, auch responsive gestalten. ;)

 

[GSR]

Danke dir erstmal vielmals für deine ausführlichen Antworten :)
Das mit dem Hintergrund hab ich inzwischen hinbekommen, scheinbar ist 1920 x 1080 so die Standardgröße für Tumblr ;)

Die vier Buttons habe ich mittlerweile zumindest eingefügt und mit der DIV-Class "navibuttons" versehen. Habe sie in the "head"-Bereich eingefügt, damit sie da oben rumschwirren. Passt auf jeden Fall vom Prinzip her so. Was mich jetzt noch ein bisschen stört, ist der Abstand zwischen dem Head-Bereich und den einzelnen Pages. Wenn man zum Beispiel den Button "Music" anklickt, ist da ein Abstand von ca. 5 cm zwischen dem Head-Bereich und dem Widget der "Music"-Page. Hast du eine Ahnung, wie ich den weg bekomme?

Eine andere Frage noch:
Ich würde unten noch gerne zwei Links zu "Kontakt" und "Impressum" anbringen, die auf jeder Seite zu sehen sind - quasi als eine Art Fußzeile. Wie bekomme ich das am besten hin?

 

[Flemli200]

um den Abstand richtig umzusetzen, kannst du das Element "<header class="header clearfix">" komplett entfernen.
So wie es aussieht ist in dem Element eh nichts drin. Durch die dem Element zugewiesenen Parameter entsteht der Abstand ;)
Hab das Element im Debugger raus genommen und voilà der Abstand ist weg ;)

Und... naja... deine Hauptnavigation ist doch auch Fix.
Entweder suchst du dir die URL der Zielseite, welche du IMMER in der Linkliste haben möchtest und legst die beiden Links manuell an...
oder du nutzt die Funktion zum auslesen von Links, welche Tumblr bestimmt bereit stellt (kenne mich mit Tumblr leider nicht so wirklich aus).
Einen Footer kannst du dann auch wieder über CSS designen :)