Wie lautet der code um ein Hintergrundbild zu zentrieren?

1 Günter Leipfinger

Hallo,
für 'stationary' von Thunderbird will ich ein 'Briefpapier' erstellen. Das Hintergrundbild soll zentriert sein.

2 Günter Leipfinger

ich habe bisher diesen code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<style type="text/css">
body {
	background-image: url(costa%20del%20sol.jpg);
	background-repeat: no-repeat;
	background-color: #939393;
	background: .jpg
{background-position:center top;
background-attachment:fixed;
	background-position: center;
	position: absolute;
	height: auto;
	width: auto;
	background-attachment: fixed;
	background-position: center center;
}
}
</style>
</head>

<body>
</body>
</html>

Diese Emailvorlagen kenne ich jetzt nicht - ich weiß nur, dass Email-Clients (insbesondere Outlook) sich leider nicht so standardkonform wie Browser verhalten - aber das kannst du ja austesten.

Mit zentriert meinst du horizontal zentriert?

Dein CSS-Code hat ein paar Klammern zuviel, dadurch könnte er schon nicht mehr (korrekt) interpretierbar sein. Der Block darf nur eine öffnende und eine schließende Klammer haben:

<style type="text/css">
body {
    background-image: url(costa%20del%20sol.jpg);
    background-color: #939393;
    background-repeat: no-repeat;
    background-position: center top;
}
</style>

In diesem Fall wird das Bild oben in der Mitte positioniert.

Falls das Bild beim Scrollen stehen bleiben soll, braucht es zusätzlich die Angabe "background-attachment: fixed":

<style type="text/css">
body {
    background-image: url(costa%20del%20sol.jpg);
    background-color: #939393;
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
}
</style>

Detaillierte Erläuterungen zur Einbindung und Positionierung von Hintergrundbildern finden sich im Wiki von SELFHTML:

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Hintergrundfarben_und_-bilder

4 Günter Leipfinger

Ich habe nun folgenden Code nach Deinen Vorgaben:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<style type="text/css">
body {
	body {
    background-image: url(costa%20del%20sol.jpg);
    background-color: #939393;
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
}
</style>


</head>

<body>
</body>
</html>

aber nun sehe ich überhaupt kein Bild mehr. Muß da nicht noch was in den body-tag rein?

5 Jörg Kruse

Aber nicht streng nach meinen Vorgaben :)

Du hast da ein "body {" zuviel drin

nach oben

Beitrag schreiben (als Gast)

Verwandte Themen
Thema	Autor	Forum	Beiträge	Letzter Beitrag
Hintergrundbild auf mobilem Endgerät als Ganzes darstellen	tommik	HTML und CSS	4	13.08.2021 16:03
Google Hintergrundbild	Gustafsson	Suchmaschinen	7	01.03.2015 11:38
Hintergrundbild verlinken	Christian	HTML und CSS	6	22.01.2009 03:53
Hintergrundbild verlinken	Stefan	HTML und CSS	9	22.01.2009 03:40
Hintergrundbild positionieren	fligor	HTML und CSS	4	06.01.2009 20:25
Header und Sides Zentrieren aber wie ??	Twigstar	HTML und CSS	7	28.07.2007 01:50
alt Text für Hintergrundbild in einem DIV	Gustafsson	HTML und CSS	7	18.08.2006 21:19

Wie lautet der code um ein Hintergrundbild zu zentrieren?

Beitrag schreiben (als Gast)

Verwandte Themen