mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Mi 03.06.2020 19:27 Benutzername: Passwort: Auto-Login

Thema: [HTML/CSS] Hintergrundbild erst ab Höhe X beginnen lassen vom 28.08.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> [HTML/CSS] Hintergrundbild erst ab Höhe X beginnen lassen
Autor Nachricht
Kalle Bowo
Threadersteller

Dabei seit: 27.11.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 28.08.2009 10:30
Titel

[HTML/CSS] Hintergrundbild erst ab Höhe X beginnen lassen

Antworten mit Zitat Zum Seitenanfang

Hallo Leute,
nun hab ichs schon geschafft mein Hintergrundbild zentriert anzeigen und es sich nur vertikal wiederholen zu lassen. Nun hätte ich aber gern noch, dass das Hintergrundbild erst ab einer bestimmten Höhe beginnt.

Hier ein Beispiel

So hab ichs und so will ichs. Auf der 2. Seite hab ich natürlich getrickst, da liegt nur ein Bild überm Hintergrundbild. Aber prinzipiell sollte es so hinterher aussehen, dass das Hintergrundbild erst bei zB. 50px Höhe anfängt. Vielleicht gibts dafür ja auch irgend einen background-position-Code, den ich noch nicht auftreiben konnte.

Mein bisher verwendeter Code sieht so aus

Code:
body {
   background-image: url(bilder/bg.png);
   background-repeat: repeat-y;
   background-position: center ;
}



Dank euch Lächel
  View user's profile Private Nachricht senden
DerM

Dabei seit: 18.01.2009
Ort: -
Alter: 38
Geschlecht: Männlich
Verfasst Fr 28.08.2009 10:44
Titel

Antworten mit Zitat Zum Seitenanfang

Code:
background-position: 0 50px;

http://www.css4you.de/background-position.html
  View user's profile Private Nachricht senden
Anzeige
Anzeige
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 38
Geschlecht: Männlich
Verfasst Fr 28.08.2009 10:55
Titel

Antworten mit Zitat Zum Seitenanfang

das wird so nicht funktionieren. repeat ab position x geht nicht sondern erstreckt sich immer über die komplette fläche eines elements.
du kannst das bild höchstens 2000px oder so hoch machen, es mit der o.g. angabe 50px nach unten versetzen und es auf no-repeat stellen.


Zuletzt bearbeitet von sahnemuh am Fr 28.08.2009 10:57, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
powdaer

Dabei seit: 20.11.2002
Ort: Regensburg
Alter: 35
Geschlecht: Weiblich
Verfasst Fr 28.08.2009 11:40
Titel

Antworten mit Zitat Zum Seitenanfang

alternativ kannst du auch eine div-box integrieren, die 50px abstand nach oben hat und in der das hintergrundbild integrieren.
  View user's profile Private Nachricht senden
top
Moderator

Dabei seit: 25.11.2003
Ort: Hedwig Holzbein Status:0
Alter: 48
Geschlecht: Männlich
Verfasst Fr 28.08.2009 11:42
Titel

Antworten mit Zitat Zum Seitenanfang

Oder etwas in dieser Richtung:

Code:
body {
   background: url(bilder/bg.png) repeat-y center;
   margin: 0;
}
div {
   background-color: #FFFFFF;
   height: 50px;
}


Wobei du dem div natürlich noch eine id oder class zuweisen solltest, damit nicht alle difs weiß und 50px hoch sind. *zwinker*
z.B.:
Code:
...

div.kopf {
   background-color: #FFFFFF;
   height: 50px;
}
  View user's profile Private Nachricht senden
buchstabensuppe

Dabei seit: 14.09.2004
Ort: Wuppertal
Alter: 36
Geschlecht: Männlich
Verfasst Fr 28.08.2009 12:05
Titel

Antworten mit Zitat Zum Seitenanfang

powdaer hat geschrieben:
alternativ kannst du auch eine div-box integrieren, die 50px abstand nach oben hat und in der das hintergrundbild integrieren.

Aber diese hat doch dann keine Höhe von 100%.

Da würde ich lieber die Headline oben in einen DIV-Container setzen, diesen mit padding in der Höhe wie gewünscht anpassen und einen weißen Hintergrund wählen.

Oder sehe ich das falsch?

// EDIT:

Quasi so:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
body {
   margin: 0;
   padding: 0;
   background: url('http://www.mariusmoerders.de/bg-test/bilder/bg.png') repeat-y center;
}
.Stil1 {
   font-family: Arial, Helvetica, sans-serif;
   background: #fff;
   width: 692px;
   padding: 10px 0;
}
</style>
</head>
<body>

<div align="center">
   <div class="Stil1">Lorem ipsum dingenskirchen</div>
</div>

</body>
</html>


Zuletzt bearbeitet von buchstabensuppe am Fr 28.08.2009 12:09, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen css - containerhöhe=höhe hintergrundbild
[html/css] element soll sich immer an die höhe anpassen.
[CSS/HTML Probs] Container und 100% Höhe
HTML code für Hintergrundbild
Suche HTML-Code für Hintergrundbild.
Hintergrundbild in HTML E-Mail geht nicht?
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.