Background color "Special Heading (H1)"

hm – if you only want the heading to get a background color you have to do a little trick – because the container of the h1 (or heading) has 100% width of the surrounding container.

go to your heading and put the heading text in <span>Wat krijg je?</span>
so you can make some specific css for that:

f.e.:

.av-special-heading-tag {
    height: 100px;
    position: relative;
    top: 40px;
}

.av-special-heading-tag span {
    background: rgba(0, 220, 152, 0.8) none repeat scroll 0 0;
    border-radius: 15px;
    padding: 10px 20px;
}

you can see the result here:
http://webers-testseite.de/enf02/wat-krijg-je/

if you only want it for that page you has to know the page-id:

.page-id-2019  .av-special-heading-tag {
    height: 100px;
    position: relative;
    top: 40px;
}

.page-id-2019 .av-special-heading-tag span {
    background: rgba(0, 220, 152, 0.8) none repeat scroll 0 0;
    border-radius: 15px;
    padding: 10px 20px;
}

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

yes but have a look to your changings : the h1 container has 100% width so the background-color goes the full 1210px (default value without 50px padding left/right) – if you look at his screenshot he likes to have only background-color behind the fonts – not the whole container.

for 50px heading and 30px subheader he only had to play with that container height and padding

yes – indeed you got me ;)