CSS Background-Image für Textfeld

BG-Image für Textfeld

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

 

Donec pede justo, fringilla vel

aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.

HowToDo

1. Text-Element erstellen (make new text-element)

2. html-Modus öffnen (open html-mode)

 


 

3. html ergänzen (add css-class to html) 

 

4. Adresse (URL)des HG-Bildes feststellen (find out URL of image)

Das Bild am besten auf einer versteckten Seite entweder als Bild oder als Datei-Download-Element hochladen und Adresse kopieren 
(put image on hidden page or use download-element for image)


 

5. Einstellungen > head bearbeiten: CSS-Klasse definieren und URL des Bildes einfügen

(settings > edit head: define CSS-class and paste URL of image) 

 

<style>

    .bg-image1 {

        background: url(.../image.jpg); /*URL HG-Bild*/

        background-repeat: no-repeat;   /*nur 1 Bild horiz./vert*/ 

        background-size: cover;         /*auch fixe Größe möglich*/   

        min-height: 500px;     /*Mindesthöhe des Containers*/

        padding: 15px;         /*Randabstand Schrift*/

    }

</style>

 

 

Beispiel:

6. Text-Element beliebig bearbeiten (normaler Bearbeitungsmodus)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Inscite autem medicinae et gubernationis ultimum cum ultimo sapientiae comparatur. Qua ex cognitione facilior facta est investigatio rerum occultissimarum. At coluit ipse amicitias.

Service 1

Consectetur adipiscing elit. Inscite autem medicinae et gubernationis ultimum cum ultimo sapientiae comparatur.

Service 2

Mihi quidem Antiochum, quem audis, satis belle videris attendere. Hanc igitur quoque transfer in animum dirigentes.

Service 3

Tamen a proposito, inquam, aberramus. Non igitur potestis voluptate omnia dirigentes aut tueri aut retinere virtutem.