zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Dringend: nur 1 Bild vertikal und horizontal zentriert (und sonst nichts)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.05.2018, 19:13
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2012
Beiträge: 64
Silber befindet sich auf einem aufstrebenden Ast
Standard 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 19:19 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.05.2018, 19:25
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2012
Beiträge: 64
Silber befindet sich auf einem aufstrebenden Ast
Standard



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>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.05.2018, 19:39
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2012
Beiträge: 64
Silber befindet sich auf einem aufstrebenden Ast
Standard

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 19:52 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 18.05.2018, 19:43
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2012
Beiträge: 64
Silber befindet sich auf einem aufstrebenden Ast
Standard

Hier live
Mit Zitat antworten
  #5 (permalink)  
Alt 18.05.2018, 19:45
Benutzer
neuer user
 
Registriert seit: 23.08.2013
Beiträge: 77
Smoke befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
  #6 (permalink)  
Alt 18.05.2018, 19:53
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2012
Beiträge: 64
Silber befindet sich auf einem aufstrebenden Ast
Standard

Dankeschööön!
Mit Zitat antworten
  #7 (permalink)  
Alt 18.05.2018, 20:15
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2012
Beiträge: 64
Silber befindet sich auf einem aufstrebenden Ast
Standard

Kann ich den Div (oder das Bild) irgendwie noch klickbar machen?

So funktioniert es scheints nicht:
Live Code

Zitat:
<a href="https://de.wikipedia.org/wiki/Schloss_Kronborg">
<div id="example1">
</a>

Geändert von Silber (18.05.2018 um 20:22 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 18.05.2018, 20:18
Benutzer
neuer user
 
Registriert seit: 23.08.2013
Beiträge: 77
Smoke befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
  #9 (permalink)  
Alt 18.05.2018, 20:25
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2012
Beiträge: 64
Silber befindet sich auf einem aufstrebenden Ast
Standard

Super Klasse Danke Genial
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
Fullscreen Background + vertikal und horizontal zentrieren Renegade (X)HTML 0 14.02.2011 16:59
horizontal und vertikal zentrieren cgdesign CSS 10 15.09.2005 16:44
container horizontal und vertikal zentrieren forumwurm CSS 11 30.08.2004 17:30
Bild horizontal und vertikal zentrieren krassonkel (X)HTML 1 13.06.2004 22:45
Bild horizontal und vertikal zentrieren Anonymous CSS 10 18.06.2003 12:20


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:14 Uhr.