Border su so lato destro e sinistro su tutta la pagina - con sovraposizione al contenuto

[govdo]

Ciao ragazzi, sono nuovo da queste parti.
Sto costruendo un sito per un cliente e i grafici mi hanno passato il mockup in psd.
potete vederlo qui https://imgur.com/a/mULv7
Come potete vedere su tutto il lato sinistro e destro della pagina esiste un bordo fatto da un pattern, il problema è che nella prima foto (quella con la mamma, bimba e cane - che in realtà sarà uno slideshow) il bordo del pattern passa sopra allo slideshow, stessa cosa anche in fondo (sopra l'immagine dell'edificio).
Sarebbe possibile in qualche modo creare un border che vada sopra il tutto come è qui sul mockup....chiramente tutti i pezzi c'è li ho in layer separati quindi non è un problema estrarre pezzo per pezzo ma non riesco a trovare come potrebbe essere possibile posizionare il bordo non all'esterno del div principale ma tipo qualche pixel in dentro.




Sto lavorando in wordpress con page builder (immagino che questo non cambi niente)....

Sto impazzendo a trovare una soluzione.....vi sarei infinitamente grato se mi aiutate a risolvere il problema. Grazie mille e buon wekend

[KillerWorm]

Ciao e benvenuto. Puoi risolvere in vari modi ma ci sono varie cose da valutare; dovrai capire tu come preferisci procedere; per il momento ti do qualche informazione di massima, magari fai tu qualche prova e valuta cosa puoi/vuoi usare.

In generale ti servirà usare un apposito contenitore (può essere un semplice div) che andrai a posizionare in modo assoluto rispetto al contenitore principale e al quale darai uno z-index con un valore elevato, in modo che risulti sovrapposto rispetto a tutto il resto.

In alternativa potresti usare gli pseudo-elementi :before e/o :after direttamente da CSS, applicandoli al contenitore principale e posizionandoli opportunamente.
Questo metodo è da preferire, a mio parere, perché meno invasivo; cioè si evita di aggiungere elementi sul markup html per il solo scopo presentazionale, ma il tutto è "creato" via CSS.

A questo punto (che sia un elemento HTML o uno pseudo-elemento CSS) potrai impostargli il tuo pattern usando border-image oppure dei background multipli opportunamente definiti o, ancora, usare due elementi distinti per definire l'uno e l'altro bordo.

Tieni conto che se utilizzi un unico elemento dovrai estenderlo per tutta l'area del contenitore principale; questo però crea il problema che tutto ciò che sta sotto tale elemento (cioè tutto ciò che viene "coperto" da questo) non potrà ricevere normalmente gli eventi del mouse perché sono "deviati" dallo stesso elemento che copre ciò che gli sta sotto. In tal caso si può risolvere impostando pointer-events: none per l'elemento stesso; questo però potrebbe generare problemi con browser non troppo recenti in cui tale proprietà non è supportata o lo è in parte. Da quel che risulta (vedi qui su "Can i use" cliccando su "Show all") non è supportata per IE10 e inferiori, mente ci sono alcune limitazione per IE e Edge (ma probabilmente non influiscono in questo caso). Valuta tu se ti serve avere una certa retrocompatibilità con "vecchi browser".

Se invece utilizzi due elementi distinti, che siano posizionati uno a sinistra e l'altro a destra, puoi impostarli in modo che abbiano giusto la larghezza del tuo pattern, per cui il problema precedente non ci sarà perché, nonostante si abbia sempre una sovrapposizione, questa è relativa solo all'ingombro dei due bordi.

E' possibile che ci siano delle altre soluzioni; intanto puoi comunque valutare come procedere, anche giusto con queste indicazioni; fai eventualmente qualche prova e fai sapere.

Buon proseguimento.