Is there a way to add two images inside a section using CSS to make them look like this: https://i.sstatic.net/74JSK.png
However, the only result I can achieve with CSS looks like this:
https://i.sstatic.net/TWrSR.png
I could use divs in HTML and add the image via HTML, but my class teacher mentioned that it would be semantically wrong in HTML5 as this is a "mood" picture - and all mood pictures should go into CSS. Any ideas?
#Principle1 {
background-image: url(../pictures/puzzle1.png), url('../pictures/Paranormalwikipic.png');
background-repeat: no-repeat, no-repeat;
width: 583px;
height: 500px;
} <section id="Principle1">
<h2>
מסר מספר 1: תאמין בעצמך!
</h2>
<p>
שיעור מספר אחת נמצא כמעט בכל אנימה. כל אחד צריך להאמין בעצמו, ולא לתת לדעות אחרים להשפיע עליו. מי יודע, אולי תהיה גיבור העל הבא?
</p>
</section>