CSS - позиционирование изображения между текстом и цветом фона

Question

Я пытаюсь воссоздать что-то, что я сам сделал по ошибке: https://bgiltphotos.files.wordpress.com/2015/09/img.jpg

Это была моя первая попытка CSS, и я продолжал добавлять селекторы в качестве временной моды , Затем я решил переписать файл и не сохранил оригинал ...

У него есть img position:absolute и h1 в разделе заголовка, а затем текст статьи. То, что я не могу воспроизвести, - это позиционирование изображения для первых трех строк текста: оно находится между текстом и цветом фона (затем я изменил цвет текста только для этих трех строк). Независимо от того, что я пробовал сейчас, у меня есть изображение, охватывающее как текст, так и цвет фона, или же цвет фона, покрывающий изображение из первой строки текста.

Вот текущий CSS:

html { 
    background-color: #5F5F5F; 
} 

img.shost { 
    position: absolute;  
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto; 
} 

div#headertext { 
    position: relative; 
    top: 5em; 
    left: 2.0em; 
    width: 60em; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: left; 
} 

div#articleMain { 
    position: relative; 
    top: 10em; 
    width: 60em; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: #fdfdf9; 
} 

Любая помощь будет очень признателен!

Answer 1

Предполагая img.shost ваше изображение просто добавить свойство top и бездельничать с переменными, пока не найдете нужную позицию изображения

Heres небрежный Codepenhttp://codepen.io/noobskie/pen/MaYdbj

просто изменить top:-120%; и вы можете увидеть что я имею в виду

Answer 2

попробуйте указать изображение z-index = -1;

он должен работать, если вы даете значение Z-индекс относительным позиционируются родители

Answer 3

решенных его - пришлось дать свойство цвета фона для тела, а не статья.

Спасибо за помощь, ребята!