|
|||
Dringend: nur 1 Bild vertikal und horizontal zentriert (und sonst nichts)
Hi Forum,
ich mache leider schon seit Stunden herum und schaffe es nicht, eine Webseite mit einem einzigen (online vorhandenen) Bild zu gestalten, wobei das Bild vertikal und horizontal zentriert und bei jeder Bildschirmgröße grundsätzlich vollständig angezeigt wird. Habe es auch schon mit "background" versucht, bin aber auch daran leider gescheitert. Hätte jemand vielleicht gerade ein passendes Beispiel parat? Ist leider ziemlich dringend. Viele Grüße Silber Geändert von Silber (18.05.2018 um 18:19 Uhr) |
Sponsored Links |
|
|||
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="de"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Titel</title> <style> #example1 { background: url(https://www.html-seminar.de/bilder/blattgruen-landschaft-1300.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } </style> </head> <body> <div id="example1"> </body> </html> |
Sponsored Links |
|
|||
Nur wenn ich zusätzlich noch Padding einfüge, funktioniert es. Aber warum brauche ich Padding? Und wie bekomme ich die Scrollbalken weg?
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="de"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Titel</title> <style> #example1 { padding: 100%; background: url(https://www.html-seminar.de/bilder/blattgruen-landschaft-1300.jpg) no-repeat center center fixed; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; } </style> </head> <body> <div id="example1"> </body> </html> Geändert von Silber (18.05.2018 um 18:52 Uhr) |
|
|||
Code:
<!DOCTYPE html> <html lang="de"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Titel</title> <style> html,body { height: 100%; width: 100%; margin: 0; padding: 0; } #example1 { background: url('https://www.html-seminar.de/bilder/blattgruen-landschaft-1300.jpg') no-repeat center center fixed; height: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } </style> </head> <body> <div id="example1"> </div> </body> </html> |
|
|||
Kann ich den Div (oder das Bild) irgendwie noch klickbar machen?
So funktioniert es scheints nicht: Live Code Zitat:
Geändert von Silber (18.05.2018 um 19:22 Uhr) |
|
|||
Code:
<!DOCTYPE html> <html lang="de"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Titel</title> <style> html,body { height: 100%; width: 100%; margin: 0; padding: 0; } #example1 { background: url('https://www.html-seminar.de/bilder/blattgruen-landschaft-1300.jpg') no-repeat center center fixed; height: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } a { display: block; height: 100%; } </style> </head> <body> <a href="https://de.wikipedia.org/wiki/Schloss_Kronborg"> <div id="example1"></div> </a> </body> </html> |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fullscreen Background + vertikal und horizontal zentrieren | Renegade | (X)HTML | 0 | 14.02.2011 15:59 |
horizontal und vertikal zentrieren | cgdesign | CSS | 10 | 15.09.2005 15:44 |
container horizontal und vertikal zentrieren | forumwurm | CSS | 11 | 30.08.2004 16:30 |
Bild horizontal und vertikal zentrieren | krassonkel | (X)HTML | 1 | 13.06.2004 21:45 |
Bild horizontal und vertikal zentrieren | Anonymous | CSS | 10 | 18.06.2003 11:20 |