CSS Objekt mittig positionieren auf 100% Background

    Hallöchen,

    und wiedermal ist man am Ende des Lateins.


    Ich habe einen Background mit 100% Auflösung. (Weil es sich um eine Indexseite handelt und die Seite sich jeder Bildschirmauflösung anpassen soll)
    Das hat bis jetzt ganz gut geklappt, weil sich eine Seite des Hintergrundes immer zu 100% anpasst und man dadurch nicht scrollen braucht.
    (Besserer Vorschlag?)

    Darüber will ich mittig ein Logo mit klar definierten Werten legen. Ich komme aber zu keiner Lösung...weil sich der Background ja vollkommen verändern kann in seiner Größe - kann man da eigentlich keine Angaben machen - oder?

    Die Sache wäre gegessen wenn man den Mittelpunkt des Hintergrundes irgendwie markieren könnte und das Bild dann dort draufpinnt :D dann könnten sich die Ränder verändern wie sie wollen....

    Eine Lösung mit CSS wäre großartig, ich hab bis jetzt rein mit Html gearbeitet, sah aber teilweise nicht gut aus und sind ja mittlerweile auch unerwüschte Attribute.

    Vorerst einmal einen guten Rutsch ins 2012! Ich werde versuchen mich zu revangieren ;)

    Am einfachsten löst du das mit einem zusätzlichen HTML-Element. Da es sich um ein Logo handelt, wäre wohl h1 passend, geht aber grundsätzlich mit jedem Blockelement. Markup wie folgt:

    HTML
    <div id="background">
   <h1 id="logo">
   </h1>
</div>

    Die Rot markierten CSS-Regeln sind eigentlich alles was du brauchst. mit margin: 0 auto zentrierst du das Element horizontal im umgebenden Element. Mit background wird wie gewohnt das Bild als Hintergrund gewählt.

    Alternativ kannst du auch mit background-position arbeiten, das funktioniert aber nur dann, wenn der 100%-Hintergrund nur eine Farbe, kein Bild, ist.

    Ich werde leider nicht schlau daraus.

    Hast du deinem body, oder div container fixe werte gegeben?

    (Wenn ich es mit den Werten mache, klebt das Logo in der linken oberen Ecke)

    Lg

    http://uniskant.com/

    der Quelltext ist allerdings der alte grausige und der Grund warum ich ihn ändern möchte ;)
    Je nach Bilschirm sollte das Logo in der Mitte sein-

    Ok sorry, ich habe glaub ich die Frage nicht klar gestellt.

    Seht auch die Vorschau an, sie ist hässlich.
    1. Wenn man schon eine Indexseite hat sollte man zumindest nicht herumscrollen müssen.
    2. CSS scheint dafür zu wenig zu sein, weil sich das Bild wenn ich es "fixe" schlimm verzerrt! (Ich wusste im Vorhinein nicht dass es wirklich so schlimm ist)

    Wie stelle ich es also an, dass ich eine Indexseite mit selbstanpassender Auflösung erstelle, wo das Layout auf allen Auflösungen* so bleibt wie ich es haben will!?

    *Maximal würde ich eh nur 1024px * .....px nehmen.

    Wie gesagt bei einer super Lösung sind mir alle Arten von Codes recht.

    2 Mal editiert, zuletzt von Der kleine Frosch (6. Januar 2012 um 20:08)

    Das Problem wurde jetzt vorerst mit CSS Layout gelöst und jetzt kommt noch eine "Auflösungsweiche" (JavaScript) drauf, dann kann ich zumindestens 3 Bildschirmgruppen einteilen was die Auflösung angeht.

    Spontane Frage: Wenn ich ein Mobilversion (Smartphone) der Site machen will, ist dass dann eine Erweiterung des Originalcodes (Wie Fremdsprachen) oder eine richtige Änderung ähnlich Auflösungsweiche?