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

Hintergrund Bild

2

2801Alex

Neues Mitglied
Wie kann man z.b. hinter text ein Bild machen?
Versucht habe ich es schon so:
HTML: 
    <body>
        <div background-image="images/BG" align="center">
        Text
        </div>
    </body>
Und so:
HTML: 
    <body background-image="images/BG" align="center">
    Text
    </body>
Und so auch:
HTML: 
    <body background="images/BG" align="center">
    Text
    </body>
Aber nichts hat funktioniert!
 
Werbung:
Hallo 2801Alex

Code: 
background-image

ist eine CSS-Deklaration und kein HTML-Attribut. Hintergrundgrafiken zählen zur Gestaltung und werden deshalb in CSS kodiert. Bilder gehören nur dann ins HTML, wenn sie nicht der Gestaltung dienen, sondern echte inhaltliche Elemente sind; dafür gibt's dann das HTML-Tag
Code: 
<img>
.

Lg X.
 
HTML: 
body {
  background: url(bild.jpg) fixed no-repeat; /* fixed oder scroll; repeat, no-repeat, repeat-x, repeat-y */
  background-size: cover; /* damit wird das Bild an die Browsergröße angepasst */
  -webkit-background-size: cover; 
  -moz-background-size: cover;
  -o-background-size: cover
}

Damit sollte dein "Problem" gelöst sein :)
 
Werbung:
War ne kurze (oder etwas längere) zeit weg und hab die antworten erst jetzt gesehen!
Also danke an euch und das mit dem <img> code weiß ich aber wie kann ich damit dann einen text z.b. über das bild schreiben?
Und Iascaux muss das in die css datei?
 
Vielleicht kann ich helfen ;)
Mach doch einfach eine CSS-Deklaration in das DIV mit dem Text:
Code: 
<body>
<div style="background-image:url(images/bg.png)" align="center">
  Text
</div>
</body>
Auch wenn ich nicht weiß, wozu man das unbedingt braucht. Ich denke vor einem Foto einer Katze kann man den Text nicht sonderlich gut erkennen xD
 
Brauch ich ja nicht für ein foto von einer katze xD
Sondern z.b. wenn ich jetzt mal z.b. einen link habe der einfach ein hintergrund bild haben soll (schlechtest beispiel eigentlich weil da weiß ich das und wie man es mit einer css datei machen kann)
Aber noch ne frage:
Würd das auch so gehen:
HTML: 
<Span style="background-image:url(images/BG.png)" align="center"> Text </span>
 
Werbung:
Ich kenn mich zwar grundätzlich mit CSS ziemlich gut aus.
Aber mit Inline-Elementen überhaupt nicht :D
Sollte aber funktionieren. Teste es doch einfach ;)
 
Also ich habe jetzt was gefunden wie ich es mache:
Code: 
body {
    background-image:url(images/bg.png);
}
Geht eigentlich sehr gut! :)
 
Hey ich hab ein ähnliches Problem, eigentlich genau das gleiche ;)

Xeno schrieb:
Hallo 2801Alex

Code: 
background-image

ist eine CSS-Deklaration und kein HTML-Attribut. Hintergrundgrafiken zählen zur Gestaltung und werden deshalb in CSS kodiert. Bilder gehören nur dann ins HTML, wenn sie nicht der Gestaltung dienen, sondern echte inhaltliche Elemente sind; dafür gibt's dann das HTML-Tag
Code: 
<img>
.

Lg X.
Zum Vergrößern anklicken....

Was meinst du damit?? Bilder gehören doch eigentlich immer ins HTML, auch dann wenn sie zur Gestaltung gehören. Die Lesesoftware von Sehbehinderten würden sie doch sonst gar nicht erkennen können, wenn alle Bilder im CSS sind.

Nun zu meinem Problem:
Ich hab das Bild wie gesagt in HTML mit <img> eingefügt, hatte aber nun Probleme den Text auf das Bild zu kriegen. Der Gedanke ist nach dem Header, auf ein großes Bild das Menü zu schreiben. Vllt wird daraus später ein Slider naja ihr wisst ja was ich meine…

Ich habe jetzt also das Bild und den Text in HTML und habe per CSS den Text über das Bild geschoben mittels margin: -500px.
Das kommt mir aber nicht sehr valide vor oder irre ich mich? Also funktionieren tut es aber gibt es noch irgendwie eine bessere Möglichkeit? Ich will nicht alles per CSS dorthin schieben wo es eigentlich sein sollte.

LG
 
Werbung:
Kaspar_ schrieb:
Hey ich hab ein ähnliches Problem, eigentlich genau das gleiche ;)

Was meinst du damit?? Bilder gehören doch eigentlich immer ins HTML, auch dann wenn sie zur Gestaltung gehören. Die Lesesoftware von Sehbehinderten würden sie doch sonst gar nicht erkennen können, wenn alle Bilder im CSS sind.
Zum Vergrößern anklicken....

Bilder im Sinne von Inhalten gehören selbstverständlich ins HTML, und zwar eben wie gesagt mit <img>. Etwas anderes ist es aber ein Bild als Hintergrund (=zur Gestaltung) zu verwenden, dafür gibt's die CSS-Deklaration background-image. Diese Lesesoftware von Sehbehinderten liest keine Gestaltung vor, sondern nur Inhalte. Ist der Einhalt ein Bild, liest sie die Tatsache, dass da ein Bild ist, und den Wert des Attributs alt vor, das, wenn es denn gesetzt ist (was der HTML-5-Standard ja verlangt) eine Kurzbeschreibung des Bildinhalts enthält.

Lg X.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben