ok – a screenshot isn’t the way a good advice can be given.
The code above works (as you can see on my page above on image overlay )

To have only the colored field behind:

.av-caption-image-overlay-bg {
    opacity: 1;
    background-color: #1885ad;
    transform: scale(0.9);
}

you than have to do this with caption text:

.av-image-caption-overlay-center {
    padding: 20px;
}

i would try to eliminate the fontello icon and than place instead a background-image:

.image-overlay .image-overlay-inside::before {
    background: url(https://homeurl/wp-content/uploads/2015/07/service_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    content: "\00a0" !important;
}

see here: Link
if you like to influence the transparency of the overlay color:

.avia_transform a:hover .image-overlay {
    opacity: 0.8 !important;
}

• This reply was modified 8 years, 1 month ago by Guenni007.

:lol

öffne dein svg mal in einem Editor (nicht text editor oder wordpad, die fügen blödsinnigen code hinzu – nimm notepad++ oder eben sublime text am mac)

das sieht man oben im Kopf (ps ich entferne immer die generator zeile) dann so aus:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 821.8 296.7" style="enable-background:new 0 0 821.8 296.7;"  xml:space="preserve">

Durch hinzufügen einer Anweisung nimmt man einfluss auf das Shrink Verhalten und die Position in der Viewbox:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 821.8 296.7" style="enable-background:new 0 0 821.8 296.7;" preserveAspectRatio="xMinYMid meet" xml:space="preserve">

dann bleibt das svg linksbündig und wird aber in der höhe vermittelt !

oder eben hier runterladen: Link

Den einen Link oben sollte dir zeigen, was ein svg so alles vorherbestimmen kann.

Dein Logo

wenn du das Browserfenster mal in der x Richtung verkleinerst, und danach in der y-Richung siehst du das es nach links sich verkleinert.
in der y-Richtung aber in der Mitte bleibt.

das kann man durch manuelles bearbeiten des svg in einem Texteditor erreichen.

du hast irgendwo das svg als background eingesetzt.

.logo {
background: url('http://www.contigo-personal-training.de/wp-content/uploads/2017/05/cpt-Logo.svg') no-repeat;
height: 60px;
top: 15px;
width: 170px;
}

das muss inline code sein ( hast du zB. das customize von WP benutzt ?)

Such das mal , und lösche das.

Dann setzt du das logo ( man kann auch svgs nehmen) im Enfold Dialog ein (ps ist wohl auch schon geschehen; daher doppelt !)
da du mit der Anweisung oben höhe und weite gesetzt hast ist auch das hier eingesetzte svg mit den gleichen Daten sichtbar !

Bei Firefox fällt es nicht auf weil offensichtlich deckungsgleich – in den anderen browsern ist es wohl anders.

click to enlarge:

wenn das geht, dann füge um das Logo sichtbar zu machen in das quick css ein:
.logo img { width: 170px; height: auto}

Da ist WordPress ein wenig hinterher mit der svg Unterstützung . Es interpretiert die svgs als hätten sie 0px höhe und 0px weite.

Und natürlich entferne die Anweisung
.logo img {display: none }

• This reply was modified 8 years, 1 month ago by Guenni007.

ich hasse den neuen Firefox – mein geliebtes Firebug läuft nicht mehr; da hätte ich das ganze schneller gefunden.

Übrigens sieh mal hier was du am svg machen kannst, damit du das shrinken beeinflussen kannst: Link

you have inserted the svg on a different way?
i do not see why there are two times the svg but

if you set the .responsive .logo img to display none too

.responsive .logo img {display: none}

it disappears ! ??? it is a riddle

how do you insert the logo svg?

what kind of logo file did you use. If you are using a svg file there are some tricks to determine the shrinking center.

you can open the svg with a good text-editor (on mac sublime-text or notepad++ on windows)
there you can place on top in the <svg … just after viewbox something like this: preserveAspectRatio="xMinYMin meet"

looks this way:

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="110 33 400 120" enable-background="new 110 33 400 120" preserveAspectRatio="xMinYMin meet" xml:space="preserve">

xMinYMin means the svg shrinks to the top left
xMinYMid means the svg shirnks to left mid
xMaxYMax shrinking to bottom right
etc.

by the way a lot of css is unknown: f.e.:

<details> 
<summary>Copyright 1999-2014.</summary>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</details>

see how it works on : https://webers-testseite.de/ajax-portfolio/#tab-3
just css !

why not using the thing what has been made for it:

Walt Disney<sup>®</sup>
and the oposite:
H<sub>2</sub>O

see here: https://webers-testseite.de/ajax-portfolio/#tab-4

by the way it is :

sup {
    vertical-align: super;
    font-size: smaller;
}

and:

sub {
    vertical-align: sub;
    font-size: smaller;
}

these definitions are implemented in all browsers – you don’t need to set it in quick css – because vertical-align sub and sup are standard definitions.

• This reply was modified 8 years, 1 month ago by Guenni007.

please try this in quick css :

@media only screen and (max-width: 767px) {
.responsive #top #header_meta { background-color: #cb0147 !important }
}

• This reply was modified 8 years, 1 month ago by Guenni007.

one license each Domain.
If you have subdomains of a main domain i guess it will be sufficient to have only one license – but in that case ask the team better

by the way you see that you can insert on your own some do_actions in enfold by:

ob_start();
do_action('custom_hook_name'); 
$output .= ob_get_clean();

this code will do the trick but to understand enfold the obove will be helpful:

@media only screen and (max-width: 989px) {
.bandegrise .av_one_half:nth-child(2) { width: 99% }
.bandegrise .av_one_half:nth-child(3) { display: none }
}

or a bit different with not:

@media only screen and (max-width: 989px) {
.bandegrise .av_one_half.first { width: 99% }
.bandegrise .av_one_half:not(.first) { display: none }
}

i do here 99% some browsers will calculate f.e. the border to the box others not. So 100% could give sometimes not the desired result