content: nie może być użyte jako atrybut css dla elementu <img>, ponieważ
CSS Content
CSS has a property called content. It can only be used with the pseudo-elements ::after and ::before. It is written like a pseudo selector (with the colon), but it’s called a pseudo-element because it’s not actually selecting anything that exists on the page but adding something new to the page.
"dozwolone" atrybuty css dla elementu <img>: [ 1 ] [ 2 ]
jeżeli to ma być jako
Obrazków używam jako ozdobniki - raz pojedynczo a raz dwa przeciwnie ułożone.
może zapisz to tak np.
<div class="atabru">
<div>
Czym jest Lorem Ipsum?
Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych
</div>
</div>
.atabru {
width: 60vw;
padding: 0;
margin: 0 auto;
text-align: center;
}
.atabru div {
height: 100%;
margin: 0;
padding: 0.5em 1em;
background-color: rgba(132,102,0,0.95);
font: 300 0.95em/1.7 monospace;
color: white;
}
.atabru::before {
background-image: url(https://res.cloudinary.com/mtkosciuszko/image/upload/v1512605608/atabrule_arfmgs.png);
background-position: left top;
background-size: cover;
background-repeat: no-repeat;
display: inline-block;
width: 100%;
height: 11px;
content:"";
}
.atabru::after {
background-image: url(https://res.cloudinary.com/mtkosciuszko/image/upload/v1512605738/atabrule-r_csrin4.png);
background-position: right top;
background-size: cover;
background-repeat: no-repeat;
display: inline-block;
width: 100%;
height: 11px;
content:"";
}