• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hintergrundbild in Website mit mehreren DIV Containern

C

Crattely

Neues Mitglied
Hi,
ich bin gerade dabei, an einer Website zu werkeln.
Jetzt habe ich folgendes Problem
Ich habe mehrere DIV Container, die ich über CSS formatiere.
Nun hätte ich gerne ein Hintergrundbild für die gesamte Website, sodass alsodie DIVs an sich kein Hintergrundbild haben und man halt das "Haupthintergrundbild" sieht.
Außerdem würde ich das Hintergrundbild gerne auf der x Achse wiederholen.
Ich habe es schon versucht, in CSS als body background zu definieren und die anderen background mit background:tranparent; durchsichtig zu machen und das Bild mit repeat-x zu wiederholen.
Hat allerdings leider nicht geklappt, ich sehe nämlich das Hintergrundbild nicht.
Außerdem sollte die Hintergrundfarbe, wenn das Hintergrundbild also zu Ende ist, braun sein .
Geht das?
Sieht halt blöd aus, wenn dann irgendwann einfach wieder weiß kommt.
Das Hintergrundbild ist übrigens 32 px breit und 3200 px hoch.
MfG

Crattely
 
Werbung:
Zeig mal deinen Code der scheinbar nicht funktioniert. Prüfe auch, ob das Hintergrundbild an der Stelle liegt wo Du es einbindest.

Und ich hab dein Topic mal in den richtigen Bereich (CSS) verschoben.
 
Code: 
body {
    background-image:url(bg.png);
    background-repeat:repeat-x;
    background-color:#cc9900;
    height:3200px;
}
 
Werbung:
Ok, also hier mal der Code:

CSS:

Code: 
body {
background-image:url(images\bg.jpg);
background-attachment:fixed;
background-repeat:repeat-x;
background-position:left;
background-color:#cc900;
height:3200px;
}

div#body {
color:black;
font-family:Comic Sans MS,Verdana,Times New Roman,Courier;
font-size:15pt;
background:transparent;
}

div#favorites{
color:black;
font-family:Comic Sans MS,Verdana,Times New Roman,Courier;
font-size:15pt;
background:transparent;
}
img#title {

display: block;
margin-left: auto;
margin-right: auto;
}


Und HTML:

Code: 
<html>
<head>
<title>
Blablabla[...].de !!!
</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="favorites">
<marquee direction="right" onMouseOver="this.scrollAmount=0" onMouseOut="this.scrollAmount=5" scrollamount="5"><img src="images\blabla.jpg"></marquee>


</div>

<div id="body">
<img src="images\title.jpg" id="title"> <br> <br>
<br> <br>

Willkommen auf [...].de
blablabla......................
<br>
<!-- [...].de wird noch durch Adresse ersetzt -->
</div>
<br>
<br>
<br>
<br>
</body>
</html>

Das wäre so mein Code, nur bekomme ich da halt keinen Hintergrund angezeigt!
Woran liegt das ?
Wenn ich mein CSS teste werden keine Fehler angezeigt, bei meinem HTML kennt er das Element marquee nicht und beschwert sich, weil beim Bild das "alt" fehlt und oben kein Doctype angegeben is, was allerdings nichts mit dem Hintergrund zu tun hat.
 
Zuletzt bearbeitet:
Werbung:
Ok, ich habe meinen Fehler gefunden, in HTML setzt man den Slash \ so und in CSS so /
Dum:DD
Jetzt habe ich nur noch das Probem, dass mein Bild oben abgeschnitten ist, könnt ihr mir da noch ne Lösung verraten ?
 
bei mir funktioniert es und es wird nichts abgeschnitten :) -> Test

HTML: 
<!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>
</head>
<style>
body {
    background-image:url(images/bg2.jpg);
    background-repeat:repeat-x;
    background-color:#cc9900;
    height:3200px;
}

div#body {
    color:black;
    font-family:Comic Sans MS,Verdana,Times New Roman,Courier;
    font-size:15pt;
    background:transparent;
}

div#favorites{
    color:black;
    font-family:Comic Sans MS,Verdana,Times New Roman,Courier;
    font-size:15pt;
    background:transparent;
}

img#title {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
</style>
<body>
<div id="favorites">
    <marquee direction="right" onMouseOver="this.scrollAmount=0" onMouseOut="this.scrollAmount=5" scrollamount="5"><img src="http://www.html.de/images/blabla.png"></marquee>
</div>

<div id="body">
    <img src="http://www.html.de/images/title.png" id="title"> 
<br>
<br>
<br>
<br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</body>
</html>
 
bei meinem HTML kennt er das Element marquee nicht und beschwert sich, weil beim Bild das "alt" fehlt und oben kein Doctype angegeben is,
Zum Vergrößern anklicken....

Und warum berichtigst du das nicht?
Ohne Doctype weiss der Browser nicht wie er dein Dokument behandeln soll. Du hast somit unterschiedliche Darstellungen in den Browsern und damit eine exzellente Fehlerquelle.
Alt beim Bild ist Voraussetzung damit Leute, die lieber ohne Bilder im Netz unterwegs sind oder sein müssen auch wissen was dort normalerweise steht.

Marquee ist verboten, das Element is nicht mehr vorhanden. Siehe das W3C was alles verboten ist: 11 Obsolete features — HTML5
Bitte lese bevor du , ja aber ... sagst, diesen Abschnitt: Warum <frameset> und <marquee> in den HTML5-Spezifikationen stehen

Berichtige bitte vorher deine Fehler und lese dich in HTML und CSS ein.
Anleitung zu HTML und CSS ist zum Beispiel HTML - berblick
 
Werbung:
Hui... vielen Dank für die freundliche Antwort.
Leute wie dich braucht es wirklich in jedem Forum, damit Sie in so einem Ton hier sprechen, vielen Dank!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben