ilch Forum » Ilch Clan 1.1 » Design und Templates » Bild hinter der Clanebene ändern.

Geschlossen
  1. Mo. 08.09.2008 20:58 Uhr #1
    User Pic
    Skuller Mitglied
    Registriert seit
    06.09.2008
    Beiträge
    28
    Beitragswertungen
    0 Beitragspunkte
    HiHo,

    Im Moment ist der Hintergrund hinter der Clanebene einfach nur grau (also links und rechts von der Clanebene.)
    Ist es möglich, dort ein selbsterstelltes Bild einzufügen?

    Und wie sieht es aus mit der Größe bzw. wie verlängert sich das Bild, wenn der Claninhalt größer wird?

    Gruß Skuller


    verwendete ilchClan Version: 1.1

    betroffene Homepage: pwnd.de.tf
    0 Mitglieder finden den Beitrag gut.
  2. Mo. 08.09.2008 22:55 Uhr #2
    User Pic
    sheepchen Mitglied
    Registriert seit
    25.10.2007
    Beiträge
    1.086
    Beitragswertungen
    2 Beitragspunkte
    hi, was du meinst ist einfach nur eine änderung deshintergrundes zum design.
    beim upload hast du ja eine style.css hochgeladen, in der steht inetwa soetwas: 
    body						{
						background-repeat:repeat-x;
						background-position:top;
						background-color:#808080;
						}

    "repeat, bedeutet, ob und in welche richtung ( im koordinatensystem) wiederholt wird.
    "position spricht auch für sich und color ja auch.
    möchtest du gern ein bild haben, musst du statt color einen bildlink 
    <img src="" alt="" border="0">
    einfügen und es an dein design anpassen.
    man kann nicht alles, aber man kann viel lernen
    mein DA
    0 Mitglieder finden den Beitrag gut.
  3. Mo. 08.09.2008 23:17 Uhr #3
    User Pic
    Skuller Mitglied
    Registriert seit
    06.09.2008
    Beiträge
    28
    Beitragswertungen
    0 Beitragspunkte
    ZitatZitat geschrieben von sheepchen

    hi, was du meinst ist einfach nur eine änderung deshintergrundes zum design.
    beim upload hast du ja eine style.css hochgeladen, in der steht inetwa soetwas: 
    body						{
						background-repeat:repeat-x;
						background-position:top;
						background-color:#808080;
						}

    "repeat, bedeutet, ob und in welche richtung ( im koordinatensystem) wiederholt wird.
    "position spricht auch für sich und color ja auch.
    möchtest du gern ein bild haben, musst du statt color einen bildlink 
    <img src="" alt="" border="0">
    einfügen und es an dein design anpassen.


    Bin ich blind oder ist das bei meinem Design irgendwie anders? 

    body {
	background-color: #575757;
	margin: 0;
}
.bodyspacer {
	background-image: url(../Bilder/bodyspacer.jpg);
	background-repeat: repeat-y;
}
.loginspacer {
	background-image: url(../Bilder/loginspacer.jpg);
	background-repeat: repeat-y;
	height: 100%;
	width: 252px;
}
.warsspacer {
	background-image: url(../Bilder/warsspacer.jpg);
	background-repeat: repeat-y;
	height: 100%;
	width: 496px;
}
.lpostspacer {
	background-image: url(../Bilder/lpostspacer.jpg);
	background-repeat: repeat-y;
	height: 100%;
	width: 252px;
}
.contenttop {
	background-image: url(../Bilder/contenttop.jpg);
	background-repeat: no-repeat;
	height: 32px;
	width: 496px;
}

.contentspacer {
	background-image: url(../Bilder/contentspacer.jpg);
	background-repeat: repeat-y;
	height: 100%;
	width: 496px;
}
.menuspacer_le {
	background-image: url(../Bilder/menuspacer_le.jpg);
	background-repeat: repeat-y;
	height: 100%;
	width: 252px;
}
.menuspacer_re {
	background-image: url(../Bilder/menuespacer_re.jpg);
	background-repeat: repeat-y;
	height: 100%;
	width: 252px;
}
.menutop_le {
	background-image: url(../Bilder/menu_le.jpg);
	background-repeat: no-repeat;
	height: 32px;
	width: 252px;
}
.menutop_re {
	background-image: url(../Bilder/menun_re.jpg);
	background-repeat: no-repeat;
	height: 32px;
	width: 252px;
}
#hmenu {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	height: auto;
	width: auto;
	margin-top: 10px;
	margin-right: 5px;
	margin-left: 60px;
}




#explode {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	width: auto;
	margin-right: 12px;
	margin-left: 12px;
}
#boxes_lpost {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	height: auto;
	width: auto;
	margin-right: 38px;
	margin-left: 8px;
}
#boxes_login {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	height: 125px;
	width: auto;
	margin-right: 8px;
	margin-left: 32px;
}
#boxes_warsabstand {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	height: auto;
	width: auto;
	margin-right: 8px;
	margin-left: 8px;
}
.log1 /*für nickname hg*/
{
	color: #CCCCCC;
	width: 198px;
	height: 19px;
	border-width: 1px;
	border-color: #2E2D2D;
	font-weight: normal;
	text-decoration: none;
	text-align: center;
	vertical-align: 20%;
	padding-top: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	background-image: url(../Bilder/name.jpg);
	background-repeat: no-repeat;
	background-color: #2E2D2D;
	background-position: left top;
}
.log2 /*für pw hg*/
{
	color: #CCCCCC;
	background-color: 2E2D2D;
	width: 198px;
	height: 19px;
	font-weight: normal;
	text-decoration: none;
	text-align: center;
	padding-top: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	background-image: url(../Bilder/passw.jpg);
	background-repeat: no-repeat;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-color: #2E2D2D;
	border-right-color: #2E2D2D;
	border-bottom-color: #2E2D2D;
	border-left-color: #2E2D2D;
	vertical-align: bottom;
	background-position: center top;
}
.logbutton /*für loginbutton*/
{
	width: 59px;
	height: 49px;
	border-width: 0px;
	font-weight: normal;
	text-decoration: none;
	background-image: url(../Bilder/login.jpg);
	background-repeat: no-repeat;
	padding-bottom: -2px;
}
.menulinksinner {
	height: auto;
	width: auto;
	margin-right: 6px;
	margin-left: 37px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
}
.menulinkstitel {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #CCCCCC;
	height: auto;
	width: auto;
	margin-right: 8px;
	margin-left: 82px;
	margin-top: 8px;
}
.menurechtsinner {
	height: auto;
	width: auto;
	margin-right: 38px;
	margin-left: 8px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
}
.menurechtstitel {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #CCCCCC;
	height: auto;
	width: auto;
	margin-right: 36px;
	margin-left: 52px;
	margin-top: 8px;
}
.menu
{
	display:block;
	color: #FFFFFF;
	font-size: 11px;
	width: 208px;
	height: 26px;
	text-indent: 50px;
	text-decoration: none;
	font-family:  Verdana, sans-serif;
	line-height: 19px;
	background-image: url(../Bilder/mainbutton.jpg);
	background-repeat: no-repeat;
}
.menu:hover
{
	display:block;
	color: #CCCCCC;
	font-size: 11px;
	width: 208px;
	height: 26px;
	text-indent: 50px;
	text-decoration: none;
	font-family:  Verdana, sans-serif;
	line-height: 19px;
	background-image: url(../Bilder/mainbutton-over.jpg);
	background-repeat: no-repeat;
}
#lastpost a:visited {
	color: #FFFFFF;
	font-size: 12px;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
}
#lastpost a:hover {
	color: #165C5C;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: none;
}
#lastpost a:link {
	color: #666666;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: none;
} 
#lastwarsabstand a:visited {
	color: #999999;
	font-size: 10px;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
}
#lastwarsabstand a:hover {
	color: #165C5C;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-decoration: none;
}
#lastwarsabstand a:link {
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-decoration: none;
}
a:hover 
{
	text-decoration: none;
	color: #990000;
}
a:link {
	font-family: verdana;
	font-size: 10px;
	color: #FFFFFF;
	text-decoration: none;
}
a:visited {
	font-family: verdana;
	font-size: 10px;
	color: #FFFFFF;
	text-decoration: none;
}
a.box 
{ 
  color: #FFFFFF; 
	font-family: Verdana; 
	font-size: 10px; 
	text-decoration: none; 
}
a.box:hover 
{
	text-decoration: none;
	color: #990000;
}

.Chead
{
	color: #666666;
	background-repeat: repeat-x;
	height: 20px;
	background-color: #1D1D1D;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.Chead td, .Chead td strong, .Chead h4, .Chead td b
{
	color: #666666;
	background-repeat: repeat-x;
	height: 20px;
	background-color: #1D1D1D;
	font-size: 10px;
}

.Callg
{
  background-color: #1D1D1D;
	color: #FFFFFF;
}

.Callg td
{
  color: #FFFFFF;
}

.Cnorm 
{
	background-color: #1D1D1D;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
}
.Cmite
{
	background-color: #1D1D1D;
	height: auto;
	width: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
}
.Cdark
{
	background-color: #1D1D1D;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
}

.smalfont 
{ 
    font-size: 10px;
		text-decoration: none; 
}

.border 
{ 
   background-color: #666666; 
}
hr 
{
	height: 0px;
	border-top-width: 1px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: groove;
	border-right-style: groove;
	border-bottom-style: groove;
	border-left-style: groove;
	border-top-color: #6D6C6C;
	border-right-color: #6D6C6C;
	border-bottom-color: #6D6C6C;
	border-left-color: #6D6C6C;
}

input, textarea, select
{
	color: #FFFFFF;
	font: 12px Verdana;
	font-weight: none;
	text-decoration: none;
	background-color: #1D1D1D;
	border: 1px solid #949494;
}
    0 Mitglieder finden den Beitrag gut.
  4. Mo. 08.09.2008 23:29 Uhr #4
    User Pic
    palganer Mitglied
    Registriert seit
    01.09.2008
    Beiträge
    7
    Beitragswertungen
    0 Beitragspunkte
    mal sehen ob es klappt..ich denke du fügst die Zeilen einfach über background ein

    Also bei mir ändert sich dann nix am hintergrund.Der code bewirkt garnichts.Hie rmal der Code,Die seite bleibt bis zur fertigstellung geheim

    background-colour:<img src="http://www.*******.de/include/Bilder/BF2.jpg" alt="" border="0"> ;

    Zuletzt modifiziert von palganer am 09.09.2008 - 00:56:00
    0 Mitglieder finden den Beitrag gut.
  5. Mi. 10.09.2008 15:54 Uhr #5
    User Pic
    sheepchen Mitglied
    Registriert seit
    25.10.2007
    Beiträge
    1.086
    Beitragswertungen
    2 Beitragspunkte
    hab nicht sooo die ahnung aber ganz oben stet doch backgroundcolor...stattdessen müsset 
    background-image: :<img src="http://www.*******.de/include/Bilder/BF2.jpg" alt="" border="0">

    ganz gut passen... sorr yhabs selber noch nie gemacht und lern auch erst xDDD
    hab nur geantwortet weils kein anderer tut XDDD
    man kann nicht alles, aber man kann viel lernen
    mein DA
    0 Mitglieder finden den Beitrag gut.
  6. Mi. 10.09.2008 17:10 Uhr #6
    User Pic
    Tolive Mitglied
    Registriert seit
    13.01.2008
    Beiträge
    923
    Beitragswertungen
    9 Beitragspunkte
    Nicht ganz richtig und nicht ganz falsch. lächeln

    Also erst einmal muss im Html Teil des von dir angeschriebenen Abschnitts eine Style Classe stehen. Ich nenne sie jetzt mal Test.

    Beispiel: 

    <div class="Test" ...>...</div>


    So dann kannst du im jeweiligen style Cheat folgendes eintragen: 

    .Test
{
  background-image:url(hier den Pfad angeben);
}


    Das kann dann noch erweitert werden, z.B. das das Bild nur einmal angezeigt wird, wie groß es ist ...
    SERVERPEDIA - Web, Linux, Datenschutz & mehr!
    vServer-Preis-Vergleich.de - Stets den besten vServer finden!
    0 Mitglieder finden den Beitrag gut.
  7. Fr. 12.09.2008 00:10 Uhr #7
    User Pic
    palganer Mitglied
    Registriert seit
    01.09.2008
    Beiträge
    7
    Beitragswertungen
    0 Beitragspunkte
    Aber helft dochmal,das Bild kann ich nun sehen im hintergrund.Nur es wird in 10 Teile aufgeteilt,sprich rechts sehe ich das was links zu sehen ist,und das Bild ist nicht starr.Wenn ich runter scrolle wandert das Bild mit.

    Sagt mir mal,einem Anfänger wie ich die 2 sachen behoben bekomme.Ich denke die Größe des bildes ist mit 1280x1024 angemesssen.

    Hier mal der code,vielleicht kann ihn einer anpassen.danke euch. 

     body {
  margin: 0;
  padding: 0;
  text-align: center;
  background-repeat:repeat-1;
  background-position:top; 
  background-image: url(http://www.XXXXXXXXXXX/include/Bilder/BF2.jpg);
  font-size: 10px;
  font-family: Verdana, sans-serif;
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Design und Templates

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten