Hallo, ich habe ein div, in dem ein Bild und ein Text übereinander stehen sollen. Das Bild soll die Größe des DIV haben. Der Text soll vertikal zentriert sein und horizontal einen Abstand von 1em vom linken Rand des div haben. Bisher habe ich das so gelöst, dass ich das Bild als Hintegrundbild in der CSS Datei angegeben habe. Da ich nun die Bild URL je nach Anwendung ändern möchte, ohne für jedes Bild eine eigene CSS Datei haben zu müssen, möchte ich, dass die Bild URL im HTML Code angegeben ist. Wie setze ich das um? Hier mein bisheriger Code:
Code
HTML:
<style>
@import url('TestX.css');
</style>
<!-- Shop -->
<div id="shop">
<div id="shoptext">
<a id="shoplink1" href="..." target="_blank">
<p id="shoptextzeile1">
KLEIDER, BLUSEN, SHIRTS,
</p>
</a>
<a id="shoplink2" href="..." target="_blank">
<p id="shoptextzeile2">
TOPS uvm.
</p>
</a>
<a id="shoplink3" href="..." target="_blank">
<p id="shoptextzeile3">
JETZT ENTDECKEN >
</p>
</a>
</div>
</div>
CSS:
#shop {
display: flex;
align-items: center;
justify-content: flex-start;
height: 500px;
margin-bottom: 0.9em;
background-size: 100% 100%;
background-image: url("https://degume.de/Bilder/2021-02-18 Bild Shopwerbung.png");
}
#shoptext{
font-size: 50pt;
margin-left: 1em;
}
#shoptext a {
color: white;
text-decoration: none;
}
#shoptextzeile1, #shoptextzeile2, #shoptextzeile3 {
margin: 0;
background-color: black;
color: white;
}
#shoptextzeile1, #shoptextzeile2 {
font-family: 'Poppins N200';
margin-bottom: 0.25em;
}
#shoptextzeile3 {
font-family: 'Poppins N300';
text-decoration: underline;
}
Alles anzeigen