Как наложить текст на фон?

Question

Как можно сделать, чтобы текст был на фоне? Хотелось бы чтобы заголовок(и другие добавочные текста были на фоне) Вот код html:

<body>
    <h1 id = "title">Путеводитель по городам</h1>
    <img class = "bg_image"
         src = "image/background-photo.jpg"
         alt = "background for site">
</body>

и css:

#title {
    text-align: center;
    font-family: Playbill;
    font-weight: normal;
    font-size: 40px;
}

.bg_image {
    background: url("image/background-photo.jpg");
    overflow: hidden;
    position: relative;
    max-width: 100%;
    height: auto;
}

Вот как выглядит на данный момент

Answer 1

например так можно

#title {
    text-align: center;
    font-family: Playbill;
    font-weight: normal;
    font-size: 40px;
    
    background-image: url("http://tvoyposter.ru/userdata/image/thumbs/p/17/b4/17b4fa73d392b4ec697a16c8ebc39416_p.jpg");
    background-size: contain;
    
    border: 1px solid black;

    width: 500px;
    height: 75px;
    line-height: 75px;
    
    color: rgba(255, 255, 255, 0.5);
}

<div id = "title">Путеводитель по городам</div>

P.S.

а вы кстати зачем то еще для img продублировали изображение через задний фон

БЛОГ НА HUSL

Как наложить текст на фон?

Ответы (1 шт):