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.

  • Das ist eine CMS Seite und die Sachen stehen im Inhalt oder? Das ist keine Extra angelegte Box, sehe ich so richtig?

  • 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.

  • Nimm die Texte mal aus dem Inhalt raus und setze sie in eine Neue Box, welche du dann auf der Startseite anzeigen lässt.

  • 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

  • So wies jetzt auf der Seite ist aber werde es anders lösen indem ich den Rand des Boxhintergrundes mit dem weiß verschwimmen lasse so siehts ok aus

  • 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

    Edited 2 times, last by RSN ().

  • 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

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!