Bild im Hintergrund ohne Wiederholung!?

mira666 · 22.05.2007, 14:52

Hallo,

ich möchte im Dreamweaver ein Foto als Hintergrundbild einstellen. Das ist ja auch nicht schwer, nnur leider wiederholt sich dieses ja dann bis zur Unendlichkeit. Genau diesen Effekt möchte ich vermeiden. Ich könnte es natürlich auch in einen Div Container stecken, aber ich glaube das ist nicht so ratsam und eigentlich wollte ich das auch nicht.

Weiterhin möchte ich über dieses Foto Ebenen ein/ ausblenden, auch kein Problem, aber diese Ebenen sollen halbtransparent sein. In diesen sollen dann später die Texte stehen. Ist es überhaupt möglich halbtransparente Ebenen einzubinden? Oder mußich dann das ein Bildausschnitt machen, den bearbeiten und diesen dann als jpg oder so einstellen?

Ich wäre Euch für Eure Hilfe sehr dankbar.
Miriam

danis` · 22.05.2007, 14:55

Zitat:

background-repeat:no-repeat;

http://www.css4you.de/background-repeat.html
bitte

mira666 · 22.05.2007, 15:06

klappt bestimmt, bin nur leider CSS mäßig noch nicht sonderlich bewandert, ich tu mich damit noch ein bisschen schwer. Kann ich den code auch in html einbinden?

mira666 · 22.05.2007, 15:09

werde mich direkt daran begeben, Deinen Workshop zum Thema CCS zu verinnerlichen.

danis` · 22.05.2007, 15:11

Zitat:

sollte so gehen.

mira666 · 22.05.2007, 20:37

versuche grad mühselig mir die grundlagen über css anzueignen...
Ich habe immernoch ein hintergrundbild, welches sich Nicht wiederholen soll. ich habe mir eine separate css datei "format" angelegt und diese mit meiner html-seite verlinkt.
Leider reagiert die html-seite nicht auf den befehl "no-repeat"

Hier mal was ich schon im css stehen haben:

<html>
<head>
<style type="text/css"></style>
<title>format</title>

</head><body>
</body>
</html>

Für Hilfe wäre ich echt dankbar.
Miriam

Mich@el · 22.05.2007, 22:23

n´Abend Miriam.
Du hast noch ein paar Dinge vergessen einzutragen bzw. vertauscht.
Hier noch mal das Ganze:

PHP-Code:


			
<style type="text/css">

<!--

a:link{color:#3333FF;}

a:visited{color:#CC9933;}

a:hover{color:#FFFFFF;}

a:active{color:#FFFFFF;}

div{

 height:150px;width:300px;margin:50px;padding:10px; 

 border:1px solid #000000}

//--></style>

und HTML

PHP-Code:


			
<div style="background-image: url(hg_kirsche.jpg);

background-repeat:no-repeat;"></div>

Grüße
Michael

mira666 · 23.05.2007, 17:44

ich nehme mal an die roten textstellen haben mir gefehlt bzw. ich habe sie vertauscht.

wqahrscheinlich hab ich es an den augen, aber ich konnte quasi keine änderung zu meinem feststellen. nichtsdestotrotz habe ich deins eins zu eins kopiert und bei mir eingefügt - es klappt nicht!

Mal von vorn:
Ich benutze den Dreamweaver 3 und habe ein neues Dokument angelegt, benannt, site definiert usw.. ich habe eine css-datei angelegt "format.css"
in meinem neuen html-dokument habe ich diese verlinkt:

<link rel="stylesheet" type="text/css" href="format.css">

Im html-Dokument habe ich dann über "Ändern" - "Seiteneigenschaften" das Hintergrundbild definiert. In der css-datei oben geschriebenes eingefügt, weil er ja das hintergrundbild nicht wiederholen soll. Es klappt nicht.

Mich@el · 23.05.2007, 19:30

Du hast das div style in den head Tag geschrieben. Das gehört natürlich in den body. Und die Beschreibung/Deklarierung selbst zum div (Höhe, Breite, Außen- und Innenabstände, usw.) hast Du gar nicht vermerkt. Das kommt auch in den Head-Tag!
Hast Du das jetzt auch so gemacht? Ich hab´s eben noch mal getestet. Es funktioniert!

So sieht´s dann insgesamt aus:

PHP-Code:


			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>asdf</title>

<style type="text/css"> 

<!-- 

a:link{color:#3333FF;} 

a:visited{color:#CC9933;} 

a:hover{color:#FFFFFF;} 

a:active{color:#FFFFFF;} 

div{ 

 height:150px;width:300px;margin:50px;padding:10px;  

 border:1px solid #000000} 

//--></style>  

<body>

<div style="background-image: url(.../Grafiken/25x25i_home.gif); 

background-repeat: no-repeat ;"></div>  

</body>

</html>

Ändere nur das *.gif welches Du als Hintergrund definierst. Dann siehst Du das Ergebnis.

mira666 · 23.05.2007, 22:22

Hallo Michael,

ich danke Dir für Deine Geduld. Es hat geklappt! Ich war irritiert, weil es nur in der Browservorschau angezeigt wird. Ist das richtig so?, aber es funktioniert.

Lieben Dank
Miriam

Bild im Hintergrund ohne Wiederholung!?

danke

gelobe besserung

klappt nicht

sorry, aber ich verstehe es nicht...