WCM Forum - Hintergrund mit css

WCM Forum (http://www.wcm.at/forum/index.php)

- Programmierung (http://www.wcm.at/forum/forumdisplay.php?f=17)

- - Hintergrund mit css (http://www.wcm.at/forum/showthread.php?t=97250)

Hintergrund mit css

Hallo!!

Eine Frage: Wie kann man mit css ein Hintergrundbild verwenden? Sollte sich immer wiederholen..

Hier die css-Datei (ist ein board)

BODY {
COLOR: #000000;
BACKGROUND-COLOR: #FFFFFF;
}

A {
COLOR: #000000;
FONT-FAMILY: Tahoma,Verdana,Arial;
FONT-STYLE: normal;
FONT-WEIGHT: normal;
TEXT-DECORATION: none;
}

A:visited {
COLOR: #000000;
TEXT-DECORATION: none;
}

A:hover {
COLOR: #636468;
TEXT-DECORATION: none;
}

A:active {
COLOR: #000000;
TEXT-DECORATION: none;
}

A.imp {
COLOR: #CC0000;
FONT-FAMILY: Tahoma,Verdana,Arial;
FONT-STYLE: normal;
FONT-WEIGHT: bold;
TEXT-DECORATION: none;
}

A.imp:visited {
COLOR: #CC0000;
TEXT-DECORATION: bold;
}

A.imp:hover {
COLOR: #000000;
TEXT-DECORATION: bold;
}

A.imp:active {
COLOR: #CC0000;
TEXT-DECORATION: bold;
}
FONT.small {
COLOR0:#FFFFFF;
font-family: Arial;
font-size: 1pt;
}
FONT.one {
COLOR: #000000;
font-family: Tahoma,Verdana,Arial;
font-size: 9pt;
}
FONT.two {
COLOR: #000000;
font-family: Tahoma,Verdana,Arial;
font-size: 10pt;
}
FONT.four {
COLOR: #000000;
font-family: Tahoma,Verdana,Arial;
font-size: 13pt;
}

FONT.title {
COLOR: #000000;
font-family: Tahoma,Verdana,Arial;
font-size: 13pt;
}

.table_s {
width : 600;
border : 3px none #000000;

}

.td1{
background-color: #E5E5E5;
}
.td2{
background-color: #E5E5E5;
width:216;
}

INPUT.normal {
BACKGROUND-COLOR: #E5E5E5;
BORDER-BOTTOM-COLOR: #000000;
BORDER-BOTTOM-WIDTH: 1px;
BORDER-LEFT-COLOR: #000000;
BORDER-LEFT-WIDTH: 1px;
BORDER-RIGHT-COLOR: #000000;
BORDER-RIGHT-WIDTH: 1px;
BORDER-TOP-COLOR: #000000;
BORDER-TOP-WIDTH: 1px;
COLOR: #000000;
FONT-FAMILY: Tahoma,Verdana,Arial;
FONT-SIZE: 9pt;
vertical-align: middle;
height: 19;
}

INPUT.invisible {
BACKGROUND-COLOR: #FFFFFF;
BORDER-BOTTOM-COLOR: #FFFFFF;
BORDER-BOTTOM-WIDTH: 0px;
BORDER-LEFT-COLOR: #FFFFFF;
BORDER-LEFT-WIDTH: 0px;
BORDER-RIGHT-COLOR: #FFFFFF;
BORDER-RIGHT-WIDTH: 0px;
BORDER-TOP-COLOR: #FFFFFF;
BORDER-TOP-WIDTH: 0px;
COLOR: #FFFFFF;
FONT-FAMILY: Arial;
FONT-SIZE: 10pt;
MARGIN-BOTTOM: 0px;
MARGIN-TOP: 0px;
}

INPUT.submit {
BACKGROUND-COLOR: #E5E5E5;
BORDER-BOTTOM-COLOR: #000000;
BORDER-BOTTOM-WIDTH: 1px;
BORDER-LEFT-COLOR: #000000;
BORDER-LEFT-WIDTH: 1px;
BORDER-RIGHT-COLOR: #000000;
BORDER-RIGHT-WIDTH: 1px;
BORDER-TOP-COLOR: #000000;
BORDER-TOP-WIDTH: 1px;
COLOR: #000000;
FONT-FAMILY: Tahoma,Verdana,Arial;
FONT-SIZE: 12px;
HEIGHT: 19px;
}

TEXTAREA {
BACKGROUND-COLOR: #E5E5E5;
BORDER-BOTTOM-COLOR: #000000;
BORDER-BOTTOM-WIDTH: 1px;
BORDER-LEFT-COLOR: #000000;
BORDER-LEFT-WIDTH: 1px;
BORDER-RIGHT-COLOR: #000000;
BORDER-RIGHT-WIDTH: 1px;
BORDER-TOP-COLOR: #000000;
BORDER-TOP-WIDTH: 1px;
COLOR: #000000;
FONT-FAMILY: Tahoma,Verdana,Arial;
FONT-SIZE: 10pt;
OVERFLOW-X: hidden;
OVERFLOW-Y: auto;
}
SELECT.normal {
BACKGROUND-COLOR: #E5E5E5;
font-family : Tahoma,Verdana,Arial;
FONT-SIZE: 9pt;
}

.signup1 {
background-color : #F6F6F6;
width : 18%;
vertical-align : top;
text-align : right;
}
.signup2 {
background-color : #F6F6F6;
width : 83%;
vertical-align : top;
}
.td22 {
background-image : url('../gfx/bg1.jpg');
vertical-align : top;
}
.tb1 {
margin-left: 4;
}

...das hab ich ca. 1 Stunde ohne Erfolg versucht..vermutlich bin ich zu dumm dafür :-(

<body style="background-image:url(background1.gif)">

Ich weiß schon, dass es mit diesem Befehl geht, nur schaffe ich es trotzdem nicht.......

<body background="xxx.jpg" >

schau dir in meiner hp die seite WIEN an

Zitat:

Original geschrieben von Helmut71
...das hab ich ca. 1 Stunde ohne Erfolg versucht..vermutlich bin ich zu dumm dafür :-(

<body style="background-image:url(background1.gif)">

Ich weiß schon, dass es mit diesem Befehl geht, nur schaffe ich es trotzdem nicht.......

<body STYLE="background-image:url('background1.gif');">

vielleicht so ?
vorausgesetzt natürlich das Bild heißt so wird genauso geschrieben und liegt im selben Ordner

Die Wege des CSS sind unheimlich!

Versuchs mal ohne die background-color. Wenn sich das Bild immer wiederholen soll, brauchst du sie eh nicht.

Außerdem kannst versuchen, nicht nur

background-image:url(datei);

anzugeben, sondern auch folgendes:

background-position:0px 0px;
------
Außerdem pass auf, dass die css-Datei im selben Ordner wie das Bild liegt, sonst müsstest du den Pfad ändern!

mfg

RTFM: http://www.w3.org/TR/CSS2/colors.htm...ckground-image

Code:

'background-image'

    Value:          <uri> | none | inherit

    Initial:          none

    Applies to:          all elements

    Inherited:          no

    Percentages:          N/A

    Media:          visual



This property sets the background image of an element. When setting a background image, authors should also specify a background color that will be used when the image is unavailable. When the image is available, it is rendered on top of the background color. (Thus, the color is visible in the transparent parts of the image).



Values for this property are either <uri>, to specify the image, or 'none', when no image is used.



Example(s):

<style>

BODY { background-image: url("marble.gif") }

P { background-image: none }

</style>





'background-repeat'

    Value:          repeat | repeat-x | repeat-y | no-repeat | inherit

    Initial:          repeat

    Applies to:          all elements

    Inherited:          no

    Percentages:          N/A

    Media:          visual



If a background image is specified, this property specifies whether the image is repeated (tiled), and how. All tiling covers the content and padding areas of a box. Values have the following meanings:



repeat

    The image is repeated both horizontally and vertically. 

repeat-x

    The image is repeated horizontally only. 

repeat-y

    The image is repeated vertically only. 

no-repeat

    The image is not repeated: only one copy of the image is drawn. 



Example(s):



<style>

BODY { 

  background: white url("pendant.gif");

  background-repeat: repeat-y;

  background-position: center;

}

</style>