zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Fullscreen Landingpage mit Inhalt darunter (Anfänger)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.06.2014, 12:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.06.2014
Beiträge: 1
dafigero befindet sich auf einem aufstrebenden Ast
Standard Fullscreen Landingpage mit Inhalt darunter (Anfänger)

Hallo liebe Community,

bei der Erstellung meiner Homepage stoße ich auf folgendes Problem. Ich möchte eine - vom Aufbau her - ähnliche Seite erstellen wie p2media.
Da ich absoluter Anfänger bin, möchte ich es erstmal bei einem Bild belassen, jedoch danach (wenn die Basics stimmen) einen Slider einbauen.

Momentan konnte ich das Problem auf folgende Art lösen:

HTML-Code:
html:

<div class="bodyoben">
</div>

css:

.bodyoben {
    background: url(pics/homescreen.JPG) no-repeat center center fixed ;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 100%;
}
Soweit alles wunderbar. Das Bild ist immer zentriert, hat volle Viewport Größe und wird beim Verkleinern / Vergrößern des Viewports skaliert und ggfls. automatisch Beschnitten.

Meine erste Frage:

Wie bekomme ich den gleichen Effekt mit einem <img> hin? Mein Versuch bisher war:

HTML-Code:
<div class="test" style="width:100%;">
        <img src="pics/homescreen.JPG" style="width: 100%;">
</div>
Das Image wird nicht verzerrt, jedoch der Effekt (immer volle Viewportgröße) wird nicht erreicht (logischerweise, da er die Höhe ja entsprechend skaliert, damit es keine Verzerrung gibt). Oder stoße ich hier mit CSS an die Grenze?

Meine zweite Frage (gehört wahrscheinlich in den jQuery Bereich):
Gibt es irgendwo ein gutes Anfänger Tutorial für den gleichen Effekt nur mit einer zusätzlichen Sliderfunktion?

Je mehr ich mich mit dem Thema beschäftige, desto mehr Fragen werfen sich mir auf. Aber es macht einfach Spaß

Beste Grüße
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.06.2014, 16:48
Benutzer
neuer user
 
Registriert seit: 22.04.2014
Beiträge: 75
Toro befindet sich auf einem aufstrebenden Ast
Standard

Hallo dafigoro,

zur ersten Frage: Du erstellst dein div wo das Bild rein soll so wie jedes andere div und setzt das Bild dann hier als background ein. Das Bild sollte vorher so bearbeitet sein das wenn es volle größe hat dies die maximalen Größe entspricht die man 'sehen' soll. Dazu kommt zum schluss: background-size: 100%
Beispiel:
Code:
#mein-div {
    margin: 0 auto; /* das div geht in die mitte */
    padding: 6px 4px; /* wieviel platz zum rand des divs frei bleibt */
    background: url(../img/mein-bild.jpg) top center no-repeat; /* Bild von oben mitte geladen, wiederholt sich nicht */
    background-size: 100%; /* damit das Bild responsive wird */

/* keine weitern Angaben zum Bild machen */
Du setzt hier das Bild also in das CSS, nicht ins HTML, deshab sollte die Größe auch stimmen. In's HTML setzt Du dann nur das div (mein-div), das Bild wird dann als Hintergrund Automatisch erscheinen.

Geändert von Toro (14.06.2014 um 16:52 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS-Layout der Browsergröße anpassen Jen CSS 3 14.11.2008 09:39
Problem mit position:relative; McCoRmIcK CSS 0 08.04.2007 17:23
dreispaltiges layout, footer soll immer mitwandern sirrpa CSS 14 24.11.2005 19:57
div box bekomme ich nett zentriert??? Hard@Bowl CSS 1 23.05.2005 12:22
height: 100% beim IE [M.o.C]Co CSS 3 12.05.2005 13:58


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:19 Uhr.