|
|||
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%; } 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> 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 |
Sponsored Links |
|
|||
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 */ Geändert von Toro (14.06.2014 um 16:52 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |