2 Hintergründe setzen

[Omniscient]

Hallo.
Wie benutze ich 2 Hintergründe? Ich habe bereits versucht, im body 2 Hintergründe zu setzen, aber das klappte leider nicht ..


Der Body in der css datei sieht so aus : (subsilver2)

Code: Alles auswählen

body {

	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	color: #323D4F;
	background-color: #FFFFFF;
	font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */
	margin: 0;
background: #EEE url() right top no-repeat fixed; 
background-image:url(http:/****/image/plusle-mini.gif);
background-position:left 30px;
}

(Ich hab die Grafikurl zensiert)

Und die Grafik wird auch richtig angezeigt :

(Oben links )

http://imageshack.us/a/img211/9651/screensi.jpg

Nur ich möchte jetzt gerne auch rechts oben eine Grafik setzen ...

Ich habe bereits versucht, eine css-klasse namens "test" zu erstellen und dann im overall_header das einzubinden, also in der css datei habe ich folgendes hinzugefügt :

Code: Alles auswählen

test {
background-image:url(http://*******com/image/panflam-mini.gif);
background-position:left 20px;
}

und dann in der overall_header habe ich folgendes gemacht :

Code: Alles auswählen

..
.
.
<div id="borderwrap"><div id="test"><div style="background-color:#fff;">
.
.
.

und in der overall_footer habe ich eben diesen div geschlossen .. klappte aber nicht, die grafik wurde einfach nicth angezeigt ..
Kann mir jemand helfen?

[Luuq]

Hallo,

schau Dir mal folgendes an, vielleicht hilft dir das weiter:
http://matthiasschuetz.com/css-zwei-bil ... intergrund

Luuq

PS: Vergiss nicht nach allen Änderungen am Style den Cache zu leeren:
ACP -->
Allgemein -->
Serverlast -->
Rekompilieren veralteter Style-Komponenten: JA
Prüft auf neue Style-Komponenten und rekompilier diese.

[Omniscient]

ich hab das auch in der html-klasse in der css datei gepackt, klappt nicht

[Omniscient]

Also so sieht das aus :

Code: Alles auswählen

html {
	font-size: 100%;
background-image:url(********);
background-position:right 30px;
}

body {

	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	color: #323D4F;
	background-color: #FFFFFF;
	font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */
	margin: 0;
background: #EEE url() right top no-repeat fixed; 
background-image:url(htt*********if);
background-position:left 30px;
}

Also ich habe im body, und im html einen Hintergrund definiert.
Allerdings wird nur der Hintergrund, den ich im body definiert habe, richtig angezeigt. Der hintergrund , den ich in html definiert habe, wird einfach nicht angezeigt. wo liegt das problem?

[Talk19zehn]

Hi, das Bild ist m.E. vorhanden, - nur, es liegt hinter dem Body. Wenn du nun die Elemente wie, #wrapheader und/oder #logodesc neu ausrichtest, sollte es sichtbar sein.
Jedoch, du erkennst daran sodann unschwer, dass das, was du errreichen möchtest, in dem Falle nicht funktioniert, wenn du "HTML" direkt ansprichst, denn das Forum liegt im Body.
Zudem ist das CSS vermutlich bereits verändert/umgebaut, denn linke und rechte Abstände wurden bereits verändert, dem Bild deines Forums ist ein grünfarbener Rahmen zu entnehmen.
Die rechte Grafik, die offenbar laut deiner Codierung mangels fixed *nicht mitscrollen soll

html {
font-size: 100%;
background-image:url(********);
background-position:right 30px;
}

und sich ggf. gleichlautend rechts der Rahmengebung befinden solle (Annahme, mangels Information), einzubinden, ginge meines Erachtens nur über einen DIV (Container), der ggf. gar float beinhaltet und/oder bspw. am Ende des Forums verschachtelt wird.
Da du dein CSS und die Templates nicht offenlegst bzw. den HelferInnen keinen Link zu dein Forum hereingibst, wird´s schwierig tätig zu werden, zu helfen. Leider ist auch bidlich nicht erkennbar, wo der Rahmen geschlossen wird bzw. wie dieser generell eingebunden wurde.
Ob an jener Stelle deiner Codierung folglich die Verschachtelung für das rechte Bild zum Einsatz kommen kann, entzieht sich daher meiner Kenntnis. Des Weiteren wäre u.V. für die *rechte nicht mitscrollende Grafik denkbar, gar mit Tabellentechniken zu arbeiten (subsilver2).


Grüße

[Omniscient]

Hi, das Bild ist m.E. vorhanden, - nur, es liegt hinter dem Body. Wenn du nun die Elemente wie, #wrapheader und/oder #logodesc neu ausrichtest, sollte es sichtbar sein.

also soll ich jetzt die hintergrundgrafik in #logodesc oder #wrapheader definieren?

ich würd dir gerne per pn den link schicken (öffentlich will ich das nicht), aber ich kann dir keine pn schicken

[Talk19zehn]

Hi,

also soll ich jetzt die hintergrundgrafik in #logodesc oder #wrapheader definieren?

Nein, das habe ich nicht gesagt.

Um dein CSS zu veröffentlichen, die relevanten HTML-Templates für helfende Hände zu veröffentlichen nutze bei Bedarf:
https://www.phpbb.de/support/pastebin.php

Ich habe lediglich versucht aufzuzeigen, dass das, was dein Vorhaben realisiert in der von dir gewählten Form sowie in Abhängigkeit deines Rahmens nicht funktionieren wird, wenn du rein die Klasse HTML ansprichst. Lies dir die Vorschläge in Ruhe durch.

Ich bin momentan selten online.

Viel Glück

[Omniscient]

Zudem ist das CSS vermutlich bereits verändert/umgebaut, denn linke und rechte Abstände wurden bereits verändert, dem Bild deines Forums ist ein grünfarbener Rahmen zu entnehmen.

Ja, das wurde in der CSS Datei von subsilver2 hinzugefügt :

Code: Alles auswählen

#borderwrap {
        background-image: url("http://******l.de/images/border.png");
        background-repeat: repeat;
        margin: 0 auto;
        padding: 5px;
width: 1060px;
     
    }

Das #borderwrap erzeugt diesen grünen Rahmen

Und in der overall_header.html datei wurde folgendes hinzugefügt :

Code: Alles auswählen

.
.
<div id="borderwrap"><div style="background-color:#fff;">
.
.
.

und im overall_footer wurde das eben auch geschlossen
(Danke an BlackHawk87 für die Hilfe )

Body sieht folgendermaßen aus :

Code: Alles auswählen

body {

	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	color: #323D4F;
	background-color: #FFFFFF;
	font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */
	margin: 0;
background: #EEE url() right top no-repeat fixed; 
background-image:url(http://n-gamers.com/image/plusle-mini.gif);
background-position:left 30px;
}

Hier im Body wird auch die Grafik links oben definiert.

und sich ggf. gleichlautend rechts der Rahmengebung befinden solle (Annahme, mangels Information)

Ja, also aktuell habe ich ja eine Grafik, und zwar links oben in der Ecke.(Siehe Screen) Ich will jetzt eine andere Grafik rechts oben in der ecke setzen.

Erachtens nur über einen DIV (Container), der ggf. gar float beinhaltet und/oder bspw. am Ende des Forums verschachtelt wird.

Wie soll ich das machen?

[Miriam]

...Wie soll ich das machen?

Beispiel HTML Seite:

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de" xml:lang="de">
<html>
<head>
<style >
<!--
#outer {
    border: 3px double blue;
    width: 800px;
    margin: 0 auto;
    display: block;
    background-color: yellow;
    padding: 0 200px;
}

.inner {
    border: 2px solid cyan;
    margin: 0 auto;
    display: block;
    width: 730px;
}

#left {
    border: 1px dotted red;
    float: left;
    display: block;
}

#left img {
    float: right;
}

#right {
    border: 1px dotted green;
    float: right;
    display: block;
}

#right img {
    float: left;
}

-->
</style>
</head>
<body>

<div id="outer">

        <div id="left">
             <img src="mangavieh_links.gif">
        </div>

        <div id="right">
             <img src="mangavieh_rechts.gif">
        </div>

        <div class="inner">
                <span>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>

                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                </span>
        </div>

</div>

</body>
</html>

So sieht's aus: Klick

[Talk19zehn]

Hello, ich habe mir nicht die Mühe gemacht, die gefloateten Elemente an die Klassen, Style subsilver2 und dein CSS anzupassen. Sofern du an dem zuvor genannten Vorschlag und der Umsetzung evtl. scheiterst, da die vorhandenen Klassen anzupassen wären sofern du keinen separaten Header wünschst, bestünde jene einfache Tabellen-Variation einer Umsetzung: Grafiken hier nur musterhaft genannt - ohne jeglichen Mitscrolleffekt - und sofern noch nicht deinerseits ausprobiert, daher lediglich ein im Verlauf bereits erwähnter Gedanke.

subsilver2 - overall_header.html

Code: Alles auswählen

	<div id="logodesc">
		<table width="100%" cellspacing="0">
		<tr>
			<td width="10%" align="left"><img src="{T_THEME_PATH}/images/icon_mini_login.gif" width="12" height="13" alt="*" /></td>
			<td width="80%" align="center"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
			<td width="10%" align="right"><img src="{T_THEME_PATH}/images/icon_mini_members.gif" width="12" height="13" alt="*" /></td>
		</tr>
		</table>
		<table width="100%" cellspacing="0">
		<tr>
			<td width="100%" align="center"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td>
		</tr>
		</table>
	</div>

Prozentual musst du bitte schauen, wie du je Zelle hinkommst. Grafiken lassen sich ja bekanntlich unter "Einhaltung der Seitenverhältnisse verkleinern"...

Gruß