zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Grafik in ein Template als Hintergrund einbinden.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.06.2008, 13:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.06.2008
Beiträge: 1
monsun befindet sich auf einem aufstrebenden Ast
Standard Grafik in ein Template als Hintergrund einbinden. -GELÖST-

Hallo zusammen,

ich bin neu hier und suche dringend Hilfe. Ich bin wahrscheinlich einer eurer Lieblinge, die weder hmtl noch css beherrschen. Ich habe wirklich leider 0 Ahnung. Ich bin Grafiker und habe mit Programmieren eigentlich recht wenig zu tun, da ich das Web bislang nur zum surfen genutzt habe .

Nun zu meinem Problem. Für euch Profis wird das sicher ein Klacks sein, für mich im Moment eine unslösbare Aufgabe.

Ich möchte gerne eine Grafik in den Hintergrund meiner Website legen. Diese Website wurde mit dem CMS System Dragonfly erstellt und ich habe lediglich in der style.css rumgepfuscht und die Grafiken geändert/angepasst um diesen Look zu bekommen.

So sieht das dann aus:

http://web6.sofia024.server4you.de

und so möchte ich das haben:

World of Warcraft Europe

die grafik sieht so aus:

http://web6.sofia024.server4you.de/t...k_img_head.jpg

meine CSS Datei ist hier:
Code:
/**
* CPG Dragonfly CMS
* Copyright (c) 2004-2005 by CPG-Nuke Dev Team, dragonflycms.org
* Released under the GNU GPL version 2 or any later version
* $Id: style.css,v 1.2 2005/12/17 04:05:50 djmaze Exp $
*
* Dark Green: 336600
* Light Green: 339900
* Dark Blue: 003366 -> 
* Gold: FFFFFF -> #085b6f Dk. Green
* Blue Text:  #007799 -> #0a6579; (Dk Gold)
*/

/*-- font, th, td, p {text-align:left;} --temp disabled*/

legend {
  font-weight: bold;
}
fieldset {
  border: #999;
  border-style: double;
  padding: 10px;
  margin-bottom: 10px;
}
br {
  clear: left;
}
label.set,radio.set,input.set {
  display: block;
  float: left;
}
radio.set {
  vertical-align: text-bottom;
}
label.set {
  text-align: left;
  width: 300px;
  padding-right: 10px;
  margin-bottom: 5px;
}
label.ulog, input.ulog {
  display: block;
  float: left;
}
label.ulog {
  text-align: left;
  width: 125px;
  padding-right: 10px;
  margin-bottom: 5px;
}
input.set {background: #000000;}

.rd {
  text-align: left;
  width: 60px;
  padding-left: 3px;
  padding-right: 10px;
}
.no {
  text-align: right;
  width: 8px;
  padding-right: 10px;
}
.yes {
  text-align: left;
  width: 20px;
  padding-right: 10px;
  vertical-align: bottom;
}
input.sub {
  left: 20px;
  float: none;
  color: #EEEEEE;
}
.title {
  background: none;
  color: #0a6579;
  text-decoration: none;
  font-style:normal; font-variant:normal; font-weight:bold; font-size:12px; font-family:Verdana
}
.content {
  background: none;
  color: #EEEEEE;
  font-style:normal; font-variant:normal; font-weight:normal; font-size:10px; font-family:Verdana
}
.storytitle {
  background: none;
  color: #808080;
  text-decoration: none;
  font-style:normal; font-variant:normal; font-weight:bold; font-size:12px; font-family:Verdana
}
.storycat {
  background: none;
  color: #F00;
  text-decoration: underline;
  font: bold 10px Verdana, Helvetica, sans-serif;
}
.option {
  background: #000000;
  color: #EEEEEE;
  text-decoration: none;
  font-style:normal; font-variant:normal; font-weight:bold; font-size:10px; font-family:Verdana
}
.tiny {
  background: none;
  color: #EEEEEE;
  text-decoration: none;
  font-style:normal; font-variant:normal; font-weight:normal; font-size:10px; font-family:Verdana
}
body {
  color: #0a6579;
  background-color: #000000;
  font-style:normal; font-variant:normal; font-weight:normal; font-size:10px; font-family:Verdana, Helvetica, sans-serif
}
img {border: 0;}
.helphead {
  color: #EEEEEE;
  font-size: 10px;
  margin: auto;
  width: 244px;
  padding: 3px;
  vertical-align: middle;
  background: #000080;
}
.helpcontent {
  width: 240px;
  border: 1px solid #FFFFFF;
  padding: 4px; color:#EEEEEE; background-color:#333333;

}
.headtable {
  width: 1024px;
  margin: auto;
  border-width: 0;
  border-collapse: collapse;
  border-spacing: 0;
  padding: 0;
}
.head {
  height: 135px;
  margin: auto;
  border-width: 0;
  border-spacing: 2px;
  padding: 2px;
  width: 1024px;
  background: #000000 url(../images/header-tile.jpg);
}
.headmenu {
  color: #FFFFFF;
  margin: auto;
  font-weight: bold;
  font-size: 22px;
  text-align: center;
  background: #000000 url(../images/forumliner-bg.gif);
}
.headerrow {
  font-weight: bold;
  background: #000 url(../images/forumliner-bg.gif);
  width: 100%;
  margin: auto;
  height: 22px;
  padding: 0;
  border: 0;
}
.cssmenu {
  text-align: center;
  margin: auto;
  height: 22px;
}
.menubutton {
  color: #FFFFFF;
  font-weight: bold;
  margin: auto;
  font-size: 12px;
  text-align: center;
  background: #000000;
}
.maintable {
  width: 1024px;
  margin: auto;
  border-width: 0;
  border-collapse: collapse;
  border-spacing: 0;
  padding: 0;
  background: #000000;
}
.mainsidel {
  width: 164px;
  vertical-align: top;
  background:  url(../images/bgleft.jpg) repeat-y;
  background-position: right;
}
.mainsider {
  width: 164px;
  vertical-align: top;
  background:  url(../images/bgright.jpg) repeat-y;
  background-position: left;
}

.main {
  width: 100%;
  vertical-align: top;
  padding-left: 5px;
  padding-right: 5px;
}
/* table inside the the td that holds the block title */
.blockhead {
  color: #FFFFFF;
  font-size: 10px;
  margin: auto;
  font-weight: bold;
  height: 14px;
  width: 152px;
  padding: 4px;
  vertical-align: bottom;
  background: #000000 url(../images/forumliner-bg.gif);
  border-left: 1px double #085b6f;
  border-right: 1px double #085b6f;
  border-top: 1px double #085b6f;
}
/* table that holds the content in blocks */
.blockcontent {
  width: 152px;
  margin: auto;
  padding: 4px;
  background: #000000;
  color:#EEEEEE;
  border-left: 1px double #085b6f;
  border-right: 1px double #085b6f;
  border-bottom: 1px double #085b6f;
  opacity: .75;
  filter: alpha(opacity=75);
}
#mainblock .top {
background: #000000;
color: #b82a0e;
padding: 10px; font-style:normal; font-variant:normal; font-weight:bold; font-size:6pt; font-family:tahoma, arial, sans-serif
}
#mainblock .text {
font: 6pt tahoma, arial, sans-serif;
color: #838628;
padding: 5px;
background: #000000;
}
.footer {
  background: #000 url(../images/forumliner-bg.gif) repeat-x;
  color: #a0cc71;
}

/* div at the top of modules holding the page title if one... */
.pagetitle {
  color: #FFFFFF;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  height: 14px;
  padding: 4px;
  background: #000000 url(../images/forumliner-bg.gif);
  border-left: 1px double #085b6f;
  border-right: 1px double #085b6f;
}
/* fieldset around each admin item */
.adminitem {
  border: 0px;
  padding: 0px;
  width: 130px;
  display: table-cell;
  vertical-align: bottom;
  text-align: center;
}
.adminitem span {
  display: block;
  width: 120px;
  color: #0a6579;
  font-weight: bold;
  text-decoration: none;
  border: 1px solid #085b6f;
  background: #3A3A3A;
}
.table1,.table2 {
  border-top: 1px double #085b6f;
  border-left: 1px double #085b6f;
  border-right: 1px double #085b6f;
  border-bottom: 1px double #085b6f;
  border-spacing: 0;
  padding: 7px;
  margin: auto;

}
/* div called from function OpenTable2 */
.table2 {
  width: 50%;
  text-align: center;
}
.newsindex,.newsarticle {
  width: 100%;
  border: 1px solid #085b6f;
  border-spacing: 0;
  padding: 5px;
  text-align: left;
  background: #000000;
}
.newstitle {
  font-weight: bold;
  font-size: 12px;
  color: #0a6579;
}
.newstext {
  font-size: 12px;
  color: #a0cc71;
}
a:link,a:active,a:visited { text-decoration: none; color : #0a6579; }
a:hover		{ text-decoration: underline; color : #0a6579; }

.statlink {
  font-weight: bold;
}
.statlink, a.statlink,.statlink a {
  color: #FFFFFF;
  text-decoration: none;
}
a:hover.statlink,.statlink a:hover {
  color: #FFF;
  text-decoration: underline;
}
.navmenu {
  color: #FFFFFF;
  background: #000080;
  margin: auto;
  font-style:normal; font-variant:normal; font-weight:bold; font-size:12px
}
.navmenu img {
  margin: 1px 5px;
}
.navmenu a {
  position: relative;
  display: block;
  text-decoration: none;
  color: #FFF;
  padding: 2px 5px;
}
.navmenu a:hover {
  background: #333333;
  text-decoration: none;
  color: #FFFFFF;
}
hr	{ height: 0px; border: solid #454545 0px; border-top-width: 1px;}
.bodyline	{
	background-color: black;
	border: 0px #202020 solid;
}/*  border-collapse: collapse; */
.forumline	{ 
  background-color: #000000; 
  border: 1px #202020 solid; 
}

td.row1	{ background-color: none; border: 1px #191919 ridge;}
td.row2	{ background-color: black; border: 1px #191919 ridge;}
td.row3	{ background-color: black; border: 1px #191919 ridge;}

td.rowpic {
		background-color: #000000;
		background-image: url(../images/cellpic1.gif);
		background-repeat: repeat-x;
}
th	{
	color: #FFFFFF; font-size: 10px; font-weight : bold;
	background-color: #0a6579; height: 25px;
	background-image: url(../images/cellpic1.gif);
}
td.cat,td.catHead,td.catSides,td.catLeft,td.catleft,td.catright,td.catbottom,td.catRight,td.catBottom {
			background-image: url(../images/cellpic1.gif);
			background-color:#454545; border: #202020; border-style: solid; height: 28px;
}
td.cat,td.catHead,td.catBottom {
	height: 28px;
	border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thtop,th.thleft,th.thright,th.thbottom,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR,th.thcornerl,th.thcornerr {
	font-weight: bold; border: #000000; border-style: solid; height: 28px;
}
td.row3Right,td.row3right,td.spaceRow {
	background-color: #454545; border: #202020; border-style: solid;
}
th.thHead,td.catHead { font-size: 10px; border-width: 1px 1px 0px 1px; }
th.thSides,td.catSides,td.spaceRow	 { border-width: 0px 1px 0px 1px; }
th.thRight,td.catRight,td.row3Right	 { border-width: 0px 1px 0px 0px; }
th.thLeft,td.catLeft	  { border-width: 0px 0px 0px 1px; }
th.thBottom,td.catBottom  { border-width: 0px 1px 1px 1px; }
th.thTop,th.thtop	 { border-width: 1px 0px 0px 0px; }
th.thCornerL,th.thcornerl { border-width: 1px 0px 0px 1px; }
th.thCornerR,th.thcornerr { border-width: 1px 1px 0px 0px; }
.maintitle	{
	font-weight: bold; font-size: 22px; font-family: "Trebuchet MS",Arial, Verdana, Helvetica, sans-serif;
	text-decoration: none; line-height : 120%; color : #EEEEEE; font-variant: small-caps;
}
/*Fonts*/
.gen { font-size : 10px; }
.genmed { font-size : 10px; }
.gensmall { font-size : 10px; }
.gen,.genmed,.gensmall { color : #EEEEEE; }
a.gen,a.genmed,a.gensmall { color: #0a6579; text-decoration: none; }
a.gen:link,a.genmed:link,a.gensmall:link	{ color: #0a6579; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover	{ color: #0a6579; text-decoration: underline; }

/* The register, login, search etc links at the top of the page */
.mainmenu		{ font-size : 10px; color : #EEEEEE }
a.mainmenu		{ text-decoration: none; color : #0a6579;  }
a.mainmenu:hover{ text-decoration: underline; color : #0a6579; }

/* Forum category titles */
.cattitle		{ font-weight: bold; font-size: 10px ; letter-spacing: 1px; color : #0a6579;}
a.cattitle		{ text-decoration: none; color : #0a6579; }
a.cattitle:hover{ text-decoration: underline; }

/* Forum title: Text and link to the forums */
.forumlink		{ font-weight: bold; font-size: 10px; color : #0a6579; }
a.forumlink 	{ text-decoration: none; color : #0a6579; }
a.forumlink:hover{ text-decoration: underline; color : #0a6579; }

.forumdesc {
  font-size: 10px;
  color: #EEEEEE;
}

/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
.nav			{ font-weight: bold; font-size: 10px; color : #EEEEEE;}
a.nav			{ text-decoration: none; color : #0a6579; }
a.nav:hover		{ text-decoration: underline;}

/* titles for the topics: could specify viewed link colour too */
.topictitle,h1,h2	{ font-weight: bold; font-size: 10px; color : #EEEEEE; }
a.topictitle:link   { text-decoration: none; color : #0a6579; }
a.topictitle:visited { text-decoration: none; color : #0a6579; }
a.topictitle:hover	{ text-decoration: underline; color : #0a6579; }

/* Name of poster in viewmsg.php and viewtopic.php and other places */
.name			{ font-size : 10px; color : #EEEEEE;}

/* Location, number of posts, post date etc */
.postdetails		{ font-size : 10px; color : #EEEEEE; }

/* The content of the posts (body of text) */
.postbody { font-size : 10px; line-height: 18px}
a.postlink:link	{ text-decoration: none; color : #0a6579;}
a.postlink:visited { text-decoration: none; color : #0a6579; }
a.postlink:hover { text-decoration: underline; color : #0a6579;}

/* Quote & Code blocks */
.code {
	font-family: Courier, 'Courier New', sans-serif; font-size: 10px; color: #999999;
	background-color: #0A0A0A; border: #085b6f; border-style: ridge;
	border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px;
	background-image:url(../images/backgrounda03.gif);
}

.quote {
	font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 10px; color: #999999; line-height: 125%;
	background-color: #0A0A0A; border: #085b6f; border-style: ridge;
	border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px;
}

/* Copyright and bottom info */
.copyright		{ font-size: 10px; font-family:Verdana, Arial, Helvetica, sans-serif; color: #999999; letter-spacing: -1px;}
a.copyright		{ color: #999999; text-decoration: none;}
a.copyright:hover { color: #EEEEEE; text-decoration: underline; ; }

/* Form elements */
input,textarea, select {
	background: #000000;
	color : #EEEEEE;
	font: normal 10px Arial, Verdana, Helvetica, sans-serif;
	border-color : #085b6f;
}
/* The text input fields background colour */
input.post, textarea.post, select {
	background-color : #000000;
}
input { text-indent : 2px; }

/* The buttons used for bbCode styling in message post */
input.button {
	background-color : #000000;
	color : #EEEEEE;
	font-size: 10px; font-family: Arial, Verdana, Helvetica, sans-serif;
}
/* The main submit button option */
input.mainoption {
	background-color : #000000;
	font-weight : bold;
}

/* None-bold submit button */
input.liteoption {
	background-color : #0A0A0A;
	font-weight : normal;
}
.helpline { background-color: #000000; border-style: none; }

.bbcbutton {
  border-style: outset;
  border-width: 1px;
}

/* pagination */
.pagact {
	font-size: 10px;
	width: 16px;
	height: 20px;
	text-align: center;
	background: transparent url(../images/pagact.gif) no-repeat scroll 0 1px;
}
.paginact, .pagneutral {width: 17px; text-align: center; }
.paginact a, .pagneutral a {
	display: block;
	font-size: 10px;
	width: 17px;
	height: 20px;
	padding-top: 5px;
	background: transparent url(../images/paginact.gif) no-repeat;
}
.pagneutral a {
	background: transparent url(../images/pagneutral.gif) no-repeat;
}

/*COPPERMINE CLASSES*/
.gallerycat{
  background: #000000;
  color:#0a6579;
  border: 1px solid #085b6f;
}
.tableb{
border:1px solid #085b6f;
}
.tableb_compact{
background:#000000 url(../images/cellpic1.gif) repeat;
color:#FFFFFF;
}
.tablef{
background:#D1D7DC;
}
.tableh1{
background:#000000 url(../images/cellpic1.gif) repeat;
color:#EEEEEE;
height:21px;
}
.tableh1_compact{
background:#000000 url(../images/cellpic1.gif) repeat;
color:#EEEEEE;
height:21px;
}
.tableh2{
background:#000000 url(../images/cellpic1.gif) repeat;
color:#EEEEEE;
height:21px;
}
.tableh2_compact{
background:#000000 url(../images/cellpic1.gif) repeat;
color:#EEEEEE;
height:21px;
}
/* Link color for main gallery breadcrumb */
a:link.statlink, a:active.statlink, a:visited.statlink {
color: #0a6579;
}
1000 Dank im Voraus.

Euer Monsun


EDIT: Ich habe jetzt die lösung gefunden, ich hatte keinen Durchblick in der CSS-Datei worfü was steht und was ich wo finde.

Die Lösung lautet:
Code:
body {
  color: #0a6579;
  background-color: #000000;
  background-image: url('../images/back_img_head.jpg');
  background-position: top;
  background-repeat: no-repeat;
  font-style:normal; font-variant:normal; font-weight:normal; font-size:10px; font-family:Verdana, Helvetica, sans-serif
}
Vielen Dank trotzdem, ihr hättet mir sicher geholfen!

Geändert von monsun (30.06.2008 um 14:24 Uhr) Grund: -- gelöst --
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Wie Hover Grafik einbinden? celine@23 CSS 1 18.05.2010 01:55
Wie dieses Template slicen damit man es mit CSS einbinden kann? ChOpSueY! CSS 1 02.07.2008 22:47
Grafik auf Hintergrund -> IE macht Pixelproblem smartens CSS 9 14.06.2007 18:12
Div Orientierung Leonidus CSS 22 30.05.2007 18:05
grafik links und rechts unten ohne zwischenraum einbinden ? Kurt CSS 2 08.06.2004 16:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:02 Uhr.