Hintergrundbild für Box

  • ´Sorry kenne mich damit aus wie ich die Sachen bearbeite mit html und so weiter auch aber woltlab und wie ich die Dateien bearbeite bin ich absolut schwach. Würde gerne wissen wo ich genau welchen Code eingeben muss.

    Tut mir Leid :(

    Hier mal mein Code für die Seite. Was muss ich jetzt zusätzlich eingeben, dass ich https://knork-survival.eu/grafiken/hintergrund.jpg dahinterlegen kann also nur in der Box.

  • Genau über acp neue seite und dann im inhalt angelegt.

    So hab ichs auch schon probiert. Funktioniert im Editor, dass das Bild angezeigt wird jedoch nicht auf der Seite die man dann aufruft.

    Code
    <style type="text/css">
    div.bg {
    background-image: url(https://knork-survival.eu/images/proxy/d7/d7f9eac2d51df40724840b5e7a3dad4efd23da66.jpg);
    }
    </style>
    <div class="bg">

    sobald ich dann die Seite speichere ist das style element auch komplett weg.

  • Code
    [data-box-identifier="com.woltlab.wcf.genericBox50"] {
        background-image: url(https://knork-survival.eu/images/proxy/d7/d7f9eac2d51df40724840b5e7a3dad4efd23da66.jpg);
        background-size: cover;
        background-repeat: no-repeat;
    }

    ACP - Anpassungen - Stilunabhängiges CSS und SCSS
    sollte gehen (UNGETESTET)

  • Ahh perfekt top hat funktioniert :)

    Hätte ich das mal vorher gewusst :D theoretisch hätte ich nur wissen müssen, wo ich das hinpacke bis ich das dann mal im Stil gefunden habe. Danke dafür bietet mir viele neue Möglichkeiten.


    Frage:

    Ist dies auch möglich auf eine Seite anzuwenden oder geht das nur auf eine Box?

  • [data-page-id="XXX"]

    XXX ist durch deine Seiten ID zu Tauschen

    CSS
    body[data-page-id="208"] {
            background-image: url(https://lrde.de/media/logo/thw.jpg);
            background-size: cover;
            background-repeat: no-repeat;
    }

    Ein Teil meiner Starseite

  • Ich würde mal dieses Thema wieder zum leben erwecken *grins*

    Folgenden Code würde ich gerne verwenden, damit nur im Header der Box das Bild angezeigt wird, leider komme ich hier nicht weiter :(

    Das Design sollte dem hier gleichen:

    CSS
    li[data-box-identifier="com.woltlab.wcf.genericBox62"] > header {
        background: #363636 url(https://www.railsimulator.net/images/letztebeitraege.png) no-repeat scroll left center !important;
        border-style: solid;
        padding: 12px 15px;
        border-image: none 1 100% 1 100%;
        border-style: solid;
        border-width: 1px;
    }


    Über einen Tipp würde ich mich sehr freuen. VG

    2 Mal editiert, zuletzt von RSN (23. April 2019 um 22:13)

  • Probiere mal das hier

    Code
    //* Hintergründe Foren Kategorien *//
    .wbbCategory[data-board-id="xx"]> header {
        background-image: url(../images/swtor/cat_banner.png);
        background-position: right -50px;
        padding: 13px 7px;
    }

    so habe ich es bei mir gemacht und es schaut dann so aus. Ich hoffe das meinst du :)

    Ich mache keine Fehler.......

    Ich erschaffe Katastrophen

  • Danke dir, aber das ist leider nicht für Boxen :( Das verwende ich auch für die Forenkategorien.


    z.B.

    CSS
    li[data-board-id="21"] > header {
        background: #363636 url(https://www.railsimulator.net/images/verwaltung.png) no-repeat scroll left center !important;
        border-style: solid;
        padding: 12px 15px;
        border-image: none 1 100% 1 100%;
        border-style: solid;
        border-width: 1px;
    }
  • Dann ist aber dein Bild oben verkehrt. Denn das ist die Forenübersicht. Und dort ist der Header mit einem Bild hinterlegt.

    Wo willst du das genau haben? Kann mir gerade nicht so richtig vorstellen was du meinst.

    Ich mache keine Fehler.......

    Ich erschaffe Katastrophen

  • Hallo mcburn, so habe ich das gemeint:


    Hinbekommen habe ich das mit dem folgenden Code, dieser ist aber nur für Boxen:

    CSS
    .box[data-box-identifier="com.woltlab.wcf.genericBox62"] .boxTitle {
        color:#FFFFFF;
        background: #363636 url(https://www.railsimulator.net/images/letztebeitraege.png) no-repeat scroll left center !important;
        border-style: solid;
        padding: 12px 15px;
        border-image: none 1 100% 1 100%;
        border-style: solid;
        border-width: 1px;
    }

    Jetzt müsste ich das Bild nur noch ein bisschen nach unten bekommen damit es anliegt. Hast du vielleicht eine Idee? Vg

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!