CSS border-image oder Hintergrundbild

Malebo

Hallo Zusammen,

ich habe ein Problem mit einem CSS, welches ich mir nicht erklären kann. Auf meiner Seite http://web.yogastuff.de versuche ich, 3 Gridelementen ein Hintergrundbild zu verpassen,
so dass der Inhalt dynamisch bleiben kann, aber der Rahmen eine Art Haus abbildet.

Bisher habe ich es mit folgender CSS probiert und wie man sehen kann, wirkt das CSS auch:

.vc_gitem-animated-block {border-left-width: 0px;
border-left-style: solid;
border-color: #000000;
border-image: url("http://web.yogastuff.de/wp-content/uploads/2015/07/haus1.png") !important;

background-image: url("http://web.yogastuff.de/wp-content/uploads/2015/07/haus1.png" ); width: 100%;
/*background-image: url("http://web.yogastuff.de/wp-content/plu…gitem_image.png"); display:none;*/
height: 600px;
background-repeat: none;
}

Eigentlich will ich aber ein border-image einbauen, damit das Bild ein Rahmen ist und eben kein Hintergrundbild.

Weiß jemand Rat?

Viele Grüße

Matthias

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

SirEctor

Das wird so nicht funktionieren. Ein Border geht nur 1x außen rum. Ein Haus hat ein spitzes Dach und müsste mitten durchs Object. Außerdem hast du wichtige Argumente vergessen.
http://www.w3schools.com/cssref/css3_pr_border-image.asp

Malebo

Ok, danke, aber wie geht es dann?

Grüße

SirEctor

Das Dach als extra Element drüber setzen, entweder mit background-image oder als content-image.

Malebo

also, du meinst, den Border auf den Seiten und unten ganz normal mit border-left, border-right etc. und das Dach als Extra-Element?

SirEctor

oder du probierst es so

Code

.vc_gitem-animated-block {
  background-image: url("http://web.yogastuff.de/wp-content/uploads/2015/07/haus1.png");
  width: 100%;
  height: 600px;
  background-repeat: no-repeat;
  padding-top: 94px;
}
.vc_gitem-zone {
  border: 7px solid black;
}

Malebo

das ist nicht schlecht! Danke! Mal sehen, was ich noch daraus machen kann. Du bist gut :)

Grüße

Matthias

Willkommen! Melden Sie sich an oder registrieren Sie sich.

CSS border-image oder Hintergrundbild

Jetzt mitmachen!