Hoe kan ik dynamisch een groene achtergrond achter tekst toevoegen, niet de hele paginabreedte, alleen de tekst.
Het groen breidt zich uit naar de hele pagina met mijn huidige code. Ik ben niet in staat om de HTML of Javascript te wijzigen, alleen het CSS bestand.
Voer hier de beschrijving van de afbeelding in
<h1>The Last Will and Testament of Eric Jones</h1>
h1 {
text-align: center;
background-color: green;
}
Zet de tekst in een inline element, zoals een <span>
.
<h1><span>The Last Will and Testament of Eric Jones</span></h1>
En pas dan de achtergrondkleur toe op het inline element.
h1 {
text-align: center;
}
h1 span {
background-color: green;
}
Een inline element is zo groot als zijn inhoud is, dus dat zou het moeten doen voor je.
Een heel eenvoudige truc is om een <span>
tag toe te voegen en daar achtergrondkleur aan toe te voegen. Het ziet er dan precies zo uit als je wilt.
<h1>
<span>The Last Will and Testament of Eric Jones</span>
</h1>
En CSS
h1 { text-align: center; }
h1 span { background-color: green; }
<span>
tag in een inline element tag, zodat het alleen over de inhoud spant die het effect nabootst.
Probeer de text-alignment center te verwijderen en centreer de <h1>
of <div>
waar de tekst zich in bevindt.
h1 {
background-color:green;
margin: 0 auto;
width: 200px;
}