nicht angemeldet
Auge
Gunnar Bittersmann
Auge
Der Martin
Der Martin
Auge
Gunnar Bittersmann
Gunnar Bittersmann
Halli HAllo, bin am erstellen einer neuen Seite mit socialengine... nun möchte ich nur auf der Titelseite(Landing Page) ein Hintergrundbild einfügen... Ich bekomm es aber nur auf allen Seiten hin, was für ein Befehl brauch ich da im css??? Gruß und schon mal Danke:)
Hallo
Du gibst dem body-Tag eine Klasse und beschränkst das Hintergrundbild dann auf diese Klasse:
<body class="bg-startseite">
body.bg-startseite {
}
Gruss
MrMurphy
Tach,
nun möchte ich nur auf der Titelseite(Landing Page) ein Hintergrundbild einfügen... Ich bekomm es aber nur auf allen Seiten hin, was für ein Befehl brauch ich da im css???
du benötigst einen passenden Selektor (CSS ist keine Programmiersprache und kennt deshalb übrigens keine Befehle, die entsprechenden „Dinge“ heißen Selektoren, Eigenschaften und Werte), der die Seite identifiziert; falls das HTML bereits eine ID an passender Stelle enthält, kannst du einfach einen ID-Selektor nutzen, sonst kann es sein, dass es am sinnvollsten wäre, das HTML entsprechend anzupassen
mfg
Woodfighter
Hallo
nun möchte ich nur auf der Titelseite(Landing Page) ein Hintergrundbild einfügen... Ich bekomm es aber nur auf allen Seiten hin, was für ein Befehl brauch ich da im css???
Neben dem schon beschriebenen Lösungsansatz, die Landingpage anhand einer ID oder Klasse zu identifizieren und nur dafür eine Regel mit dem passenden Hintergrundbild in die CSS-Datei einzufügen, kannst du natürlich auch im Dokument-Header der Landingpage die nur in diesem Dokument gültige CSS-Regel notieren
<!DOCTYPE html>
<html>
<head lang="de">
<!-- Charset, Title, etc. pp. -->
<style>
body { backgroud: url(...); }
</style>
</head>
<body>
<!-- Der Rest des HTML-Dokuments -->
Vorteil: Die Regel wird nur hier gesetzt, wo sie gebraucht wird und sonst nicht übertragen. Nachteil: Soll die Regel später (auch) an anderer Stelle benutzt werden, muss sie in die CSS-Datei „umziehen“ oder in die betreffenden Dokumente kopiert werden. Das Erste macht Umbauarbeiten notwendig, das Letztere bedeutet auf lange Sicht einen erhöhten Wartungsaufwand.
Tschö, Auge
@@Auge
body { backgroud: url(...); }
Besser: background-image.
Man möchte andere evtl. gesetzten Hintergrundeigenschaften (wie background-color) vermutlich nicht überschreiben.
LLAP 🖖
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
Hai Leute , hab mal was eingefügt aber klappt trotzdem nicht, bin leider erst am einarbeiten in diese Materie:)
so hab ich es gemacht:
/* GLOBAL STYLES, FONTS & RESETS */
html
{
min-height: 100%;
margin-bottom: 1px;
overflow-y: scroll;
}
body
{
background-color: $theme_body_background_color;
overflow-x: hidden;
}
body.bg-startseite
{
background-image:url(http://www.vrinet.de/public/admin/Logo-70mm.png);
background-position: center ;
background-repeat: no-repeat;
background-attachment: fixed
background-size: cover;
}
*
{
padding: 0;
margin: 0;
border: none;
border-style: solid;
border-width: 0px;
border-color: $theme_border_color;
wenn ich es so mache, ist das bild wieder überall......
body
{
background-color: $theme_body_background_color;
overflow-x: hidden;
body.bg-startseite
background-image:url(http://www.vrinet.de/public/admin/Logo-70mm.png);
background-position: center ;
background-repeat: no-repeat;
background-attachment: fixed
background-size: cover;
}
Hallo
so hab ich es gemacht:
body { background-color: $theme_body_background_color; overflow-x: hidden; }
Ich hoffe, dass $theme_body_background_color vor dem Produktiveinsatz durch einen in CSS erlaubten Wert ersetzt wird.
body.bg-startseite { background-image:url(http://www.vrinet.de/public/admin/Logo-70mm.png); background-position: center ; background-repeat: no-repeat; background-attachment: fixed background-size: cover; }
background-attachment fällt das CSS auseinander.center und ; stolpern.Prüfe und korrigiere die entsprechenden Stellen deines CSS-Codes und verkünde hier bitte die Ergebnisse deines Tuns.
Tschö, Auge
Hallo,
Hai Leute , hab mal was eingefügt aber klappt trotzdem nicht
... und das heißt?
Das einzige, was hier klappt, sind die Türen. ;-)
html { min-height: 100%; margin-bottom: 1px; overflow-y: scroll; }
Diese Regeln für das html-Element sind IMO nicht sinnvoll. Du erzwingst eine Höhe von mindestens 100% plus 1px, das ergibt sowieso schon einen Scrollbalken, und forderst dann auch noch, dass ständig einer da sein soll. Wozu? Das kannst du komplett weglassen.
body { background-color: $theme_body_background_color; overflow-x: hidden; }
Verwendest du irgendein CMS oder ein Templatesystem, das $theme_body_background_color noch ersetzt?
body.bg-startseite { background-image:url(http://www.vrinet.de/public/admin/Logo-70mm.png); background-position: center ; background-repeat: no-repeat; background-attachment: fixed background-size: cover; }
Auf kleine Formfehler hat Auge dich schon aufmerksam gemacht; viel interessanter ist aber noch: Hast du dem body-Element auf der Startseite auch tatsächlich die Klasse bg-startseite gegeben?
* { padding: 0; margin: 0; border: none; border-style: solid; border-width: 0px; border-color: $theme_border_color;
Ich persönich halte von solchen Reset-Everything-Keulen nichts. Ich finde es sinnvoller, Eigenschaften und Werte gezielt da zu setzen, wo ich sie haben möchte. Beispielsweise hat das globale Nullsetzen von margin und padding den Nachteil, dass ich diese Werte nachher für sämtliche Elemente, bei denen ich sie eigentlich brauche, wieder selbst setzen muss (z.B. Absätze, Überschriften). Und "kein Rahmen" ist für die meisten Elemente eh Default.
So long,
Martin
Das einzige was ich eingefügt habe ist das :
{
body.bg-startseite
background-image:url(http://www.vrinet.de/public/admin/Logo-70mm.png);
background-position: center ;
background-repeat: no-repeat;
background-attachment: fixed
background-size: cover;
}
der rest ist schon vorgegeben von dem theme das man sich aussuchen kann bei socialengine....
Hi,
Das einzige was ich eingefügt habe ist das :
body.bg-startseite { background-image:url(http://www.vrinet.de/public/admin/Logo-70mm.png); background-position: center ; background-repeat: no-repeat; background-attachment: fixed background-size: cover; }der rest ist schon vorgegeben von dem theme das man sich aussuchen kann bei socialengine....
okay, aber die Frage bleibt bisher unbeantwortet: Hast du auch daran gedacht, dem body-Element die genannte Klasse zu setzen? Wenn nein, gibt es kein Element, auf das die CSS-Regel passt, und sie bleibt dementsprechend wirkungslos.
Ciao,
Martin
wie setzte ich dem Element eine klasse ? :)
Hallo
wie setzte ich dem Element eine klasse ? :)
So, wie es MrMurphy1 in der ersten Antwort auf deine Frage gezeigt hat.
Tschö, Auge
Ich Danke allen Helfern schon einmal aber ich gebe auf.... wenn ich das class setzte ist alles weiss im Hintergrund:) ich werd da wohl einen Fachmann ran lassen müssen, ich setz das wohl alles falsch irgendwo hin.... trotzdem vielen Dank super Support hier....
das ist oder wird die seite: www.vrinet.de könnt ja mal drüber schauen:) greedz Michael
Hallo
Ich Danke allen Helfern schon einmal aber ich gebe auf....
Dass einen – gerade als Anfänger – soetwas überfordern kann, ist keine Schande.
wenn ich das class setzte ist alles weiss im Hintergrund:)
Dann läuft da noch etwas anderes falsch. Du hast die Klasse für das Element <body> vergeben. Da steht nun also im Quelltext der Landingpage folgendes:
<body class="bg-startseite">
Hast du die von mir angemerkten Fehler behoben (Leerzeichen vor Semikolon, an anderer Stelle fehlendes Semikolon)? Hast du, was ich erst eben bemerkte, die URL zum Bild in der CSS-Regel in Anführungszeichen gesetzt?
Dein …
background-image:url(http://www.vrinet.de/public/admin/Logo-70mm.png);
… wird so zu …
background-image:url("http://www.vrinet.de/public/admin/Logo-70mm.png");
Ich kann dann nämlich das Hintergrundbild deiner Seite für mich ändern.
Tschö, Auge
@@Auge
Hast du, was ich erst eben bemerkte, die URL zum Bild in der CSS-Regel in Anführungszeichen gesetzt?
Warum sollte …?
background-image:url(http://www.vrinet.de/public/admin/Logo-70mm.png);
… wird so zu …
background-image:url("http://www.vrinet.de/public/admin/Logo-70mm.png");
Das sollte überhaupt keinen Unterschied machen. [CSS-VALUES §3.4]
LLAP 🖖
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
@@Michael
Das einzige was ich eingefügt habe ist das :
{ body.bg-startseite background-image:url(http://www.vrinet.de/public/admin/Logo-70mm.png); background-position: center ; background-repeat: no-repeat; background-attachment: fixed background-size: cover; }
Du solltest dir die Klammersetzung nochmal anschauen.
LLAP 🖖
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
@@Der Martin
Verwendest du irgendein CMS oder ein Templatesystem, das $theme_body_background_color noch ersetzt?
Oder einen CSS-Präprozessor?
* { padding: 0; margin: 0; border: none; border-style: solid; border-width: 0px; border-color: $theme_border_color;Ich persönich halte von solchen Reset-Everything-Keulen nichts. Ich finde es sinnvoller, Eigenschaften und Werte gezielt da zu setzen, wo ich sie haben möchte.
ACK.
Außerdem ist es unsinnig, erst
border-width: medium;
border-style: none;
border-color: currentColor;
zu setzen (das ist, was die Kurzform border: none tut) um gleich darauf die Werte wieder zu ändern.
LLAP 🖖
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
so sieht es bei mir aus wenn ich in socialengine was mache
@@Michael
so sieht es bei mir aus
Wenn du keine Entwicklungsumgebeung verwendest, die dir Syntaxfehler anzeigt, überprüfe deinen CSS-Code mit dem CSS-Validator.
LLAP 🖖
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|