im new to code in general and am currently studying html and css, right now im trying to recreate this mock-up i made. So far i got it down right.
However i original went about adding the image in css as a background image for the body, and i thought to myself, that's probably not the way to do it, so i tried adding the image in html and im struggling figuring out how to make it not interfere with the text section on left.
Edit: Sorry, my friend closed my browser by mistake before I finished typing. I added a snippet to demonstrate.
I think you are talking about the blue triangular image in the lower left, in which case;
I think that image is suited to be a background image. It doesn't need to be a background on the body, though that is a viable method. It could as well be a background of a container div. background-position: bottom right; you can use a percentage for background-size if you want the containing div to be responsive. Certainly background-image will be the most simple solution.
That said, there are valid reasons why you may want that image to be a content image (html <img> tag). See the answers to this question When to use IMG vs. CSS background-image? for some ideas and considerations regarding the differences, advantages and disadvantages, between html img and css background-image.
If you still want to use your image as an html <img>:
You could make a container div where you put your image, there are different methods of positioning the image within that div, you could use parent padding to push it into the lower right and leave space on the left and top, or you could use absolute positioning, and there are probably other ways as well. You should put position: relative; on the container so that you can absolutely position a child container within it.
Then create the child container within that container to put your text/other content. Give it position:absolute; top:0; left:0; width:100%; height:100%; so it fills and covers the parent container. Put your text/content in this div.
This basically creates a pseudo background-image by absolutely positioning one div on top of another. The parent can use relative positioning and the children can use percentages, so the whole pattern can still be responsive.
.fake-body {
position: relative;
width: 100vw;
height: 100vh;
}
.parent-container {
position: relative;
box-sizing: content-box;
margin: 8% 10%;
height: 80%;
width: 80%;
background-color: #fff;
border: 1px solid #000;
}
.fake-image {
box-sizing: content-box;
position: absolute;
bottom: 0;
right: 0;
height: 80%;
width: 80%;
background-image: linear-gradient(to bottom right, white 0%, white 50%, #78a0ff 51%, #78a0ff 100%);
}
.child-container {
box-sizing: content-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
}
.child-container h3 {
text-align: center;
margin: 50px 20px 20px;
color: #000;
}
.child-container p {
margin: 20px 20px 30px;
color: #000;
}<div class="fake-body">
<div class="parent-container">
<div class="fake-image"></div>
<div class="child-container">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu
fugiat nulla pariatur.</p>
</div>
</div>
</div>Note that I didn't link a real image, but the <div class="fake-image"></div> represents an <img> tag which can be positioned in the same manner.
Also the .fake-body div shouldn't be needed, I just used that to get around stackoverflow's snippet quirkiness.
