html - cssを使用した画像上のテキストの配置

Question

「ここ」の画像の上にテキストを配置する方法は?
ラップから 20px で、250px で固定されている必要があります。

HTML

<div class="background-image">
    <img src="img/picture.jpg" alt="pasta-town">
    <div id="motto" class="wrap">
        <div>some motto</div>
    </div>
</div>

CSS

#motto {
font-size: 26px;
font-family: "MetaProMedium";
position: absolute; 
top:0;
}
#motto div {
left: 755px;
width: 250px;
}
.background-image {
position: relative;
width: 100%;
}
.background-image > img {
width: 100%;
}