이미지 안의 텍스트 배치 (CSS3)

<!-- 7장 연습문제 3 -->
<html lang = "ko">
    <head>
        <meta charset = "UTF-8">
        <title>7장 연습문제 3</title>
        <style>
        .background{
            background-image: url("images/apple-bg.jpg");
            background-repeat: no-repeat;
            height: 100%;
            width: auto;
        }
      
        .content{
            background-color:rgba(255,255,255,0.5);
            vertical-align: bottom;
            

        }

        </style>
    </head>

    <body>
       <div class = "background">
        <div class = "content">
        <p>하루 한 알의 사과는 의사를 </p>

       </div>

       </div>
       
    </body>
</html>

제가 뻘짓 중인 코드는 이러하구요

예제는 이거입니다.

하루 한 알의 사과는 의사를 멀리한다 텍스트가 아래쪽에도 갔다가 화면 중앙에도 갔다가 (사진 중앙x)

흰색 투명 배경은 사진을 80% 덮었다가 10% 덮었다가.. 난리를 쳐보다가 질문합니다.. ㅠ

제가 아직 레이아웃에 대해서는 안 배워서 그런데.. 그래서 그런가 어렵네요.. 레이아웃에 있어서 우선 순위나 상속, 포함 같은 개념?도 잘 모르겠구.. 해결 코드에 관한 간략한 설명도 함께 해주시면 감사하겠습니당 ㅎㅎ