Zur Navigation

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.

23.03.2018 11:43

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>

23.03.2018 13:11

3 Jörg

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

23.03.2018 13:44 | geändert: 23.03.2018 13:47

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?

23.03.2018 13:59

5 Jörg

Aber nicht streng nach meinen Vorgaben :)

Du hast da ein "body {" zuviel drin

23.03.2018 14:01

1 Forenmitglied fand diesen Beitrag gut

Beitrag schreiben (als Gast)





[BBCode-Hilfe]