"push up" background over content with dynamic height

У меня есть div с фоновым изображением. Внутри этого div находится абсолютно позиционированный div с текстом в нем. В ширинах> 650, текст представляет собой прямоугольник, плавающий внутри div. При ширине < = 650 текст привязан к нижней части div со 100% шириной."push up" background over content with dynamic height

Когда это произойдет, оно расположено поверх нижней части фонового изображения. Я хотел бы, чтобы фоновое изображение получилось «нажатым», чтобы вы могли видеть нижнюю часть фонового изображения. Я мог бы дать отрицательное смещение к фоновой позиции, , но высота содержимого динамическая, потому что текст обертывается в соответствии с шириной области просмотра, поэтому я не буду знать высоту, так, чтобы указать конкретное смещение/margin не является опцией.

Есть ли способ сделать это в чистом CSS с дизайном, который у меня есть? Я хотел бы избежать JavaScript, и избежать реорганизации макет HTML (например, с использованием<img>вместоbackground-image).

Изображения, описывающие ситуацию ниже, ниже код, что:

Что у меня есть:

Что я хочу:

#container{ 
 
       background-image:url("http://i.imgur.com/u4xZlez.png"); 
 
       background-size:100%; 
 
       height:400px; 
 
       display:block; 
 
       position:relative; 
 
       width:100%; 
 
       max-width:650px; 
 
       border:1px solid red; 
 
       background-repeat:no-repeat; 
 
      } 
 
      #content{ 
 
       position:absolute; 
 
       top:10%; 
 
       display:block; 
 
       background-color:white; 
 
       width:60%; 
 
       margin-left:10%; 
 
       border:1px solid black; 
 
      } 
 

 
      @media(max-width:650px){ 
 
       #content{ 
 
        bottom:0px; 
 
        top:auto; 
 
        width:100%; 
 
        margin-left:0px; 
 
       } 
 
      }

<div id="container"> 
 
      <div id="content"> 
 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p> 
 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p> 
 
      </div> 
 
     </div>

источник

2016-07-07 chiliNUT

В запросе медиа, изменить контейнер дисплей изгибаться.

Использовать обоснованный контент для перемещения до основания.

Добавить псевдоним, используя команду, чтобы переместить его в начало, перед .

Установить фоновое изображение контейнера в этом псевдо вместо этого, и привести его к нижнему

#container{ 
 
       background-image:url("http://i.imgur.com/u4xZlez.png"); 
 
       background-size:100%; 
 
       height:400px; 
 
       display:block; 
 
       position:relative; 
 
       width:100%; 
 
       max-width:650px; 
 
       border:1px solid red; 
 
       background-repeat:no-repeat; 
 
      } 
 
      #content{ 
 
       position:absolute; 
 
       top:10%; 
 
       display:block; 
 
       background-color:white; 
 
       width:60%; 
 
       margin-left:10%; 
 
       border:1px solid black; 
 
      } 
 

 
    @media(max-width: 650px) { 
 

 
    #container { 
 
     display: flex; 
 
     flex-direction: column; 
 
     justify-content: flex-end; 
 
     background-size: 0%; 
 
    } 
 

 
    #container::before { 
 
     content: ""; 
 
/*  background-image: url("http://i.imgur.com/u4xZlez.png"); */ 
 
     background-image: inherit; 
 
     background-size: 100%; 
 
     background-position: center bottom; 
 
     width: 100%; 
 
     flex-grow: 1; 
 
     order: 1; 
 
    } 
 

 
    #content { 
 
     position: static; 
 
     bottom: 10px; 
 
     top: auto; 
 
     width: 100%; 
 
     margin-left: 0px; 
 
     order: 2; 
 
    } 
 
}

<div id="container"> 
 
      <div id="content"> 
 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p> 
 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p> 
 
      </div> 
 
     </div>

источник

2016-07-07 19:11:32 vals

Это прекрасно! Я думаю, что я хорошо понимаю эту идею, чтобы реализовать ее, но мне определенно нужно стирать себя с помощью гибкой коробки. Кроме того, понятия не имели, что вы можете наследовать фоновое изображение. Отличная информация! – chiliNUT

Кроме того, чтобы избавиться от эффекта «удвоения», внутри медиа-запроса вы можете добавить 'background-size: 0%' to '# container', чтобы он был скрыт, но' #container :: before' все еще может наследовать его. – chiliNUT

Счастлив, что это помогло. Я не заметил эффекта удвоения, я отредактировал фрагмент в ответе, чтобы отразить вашу (очень хорошую) идею. – vals

#container{ 
 
       background-image:url("http://i.imgur.com/u4xZlez.png"); 
 
       background-size:100%; 
 
       background-position: 0 -110px; 
 
       height:400px; 
 
       display:block; 
 
       position:relative; 
 
       width:100%; 
 
       max-width:650px; 
 
       border:1px solid red; 
 
       background-repeat:no-repeat; 
 
      } 
 
      #content{ 
 
       position:absolute; 
 
       top:10%; 
 
       display:block; 
 
       background-color:white; 
 
       width:60%; 
 
       margin-left:10%; 
 
       border:1px solid black; 
 
      } 
 

 
      @media(max-width:650px){ 
 
       #content{ 
 
        bottom:0px; 
 
        top:auto; 
 
        width:100%; 
 
        margin-left:0px; 
 
       } 
 
      }

<div id="container"> 
 
      <div id="content"> 
 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p> 
 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p> 
 
      </div> 
 
     </div>

Попробуйте использовать фон-позиции CSS свойство, которое принимает точек, а также% измерений. Вам нужно будет помещать его в медиа-запрос, поэтому он применяется только на экранах> 650 пикселей, но я оставлю это для вас.

источник

2016-07-07 18:26:25

Это включает в себя определение специфического смещение фона позиции, которая включает в себя зная высоту содержимое, но я не знаю высоту, так как она динамическая. – chiliNUT

#container { 
 
    background-image: url("http://i.imgur.com/u4xZlez.png"); 
 
    background-size: 100%; 
 
    height: 400px; 
 
    display: block; 
 
    position: relative; 
 
    width: 100%; 
 
    max-width: 650px; 
 
    border: 1px solid red; 
 
    background-repeat: no-repeat; 
 
} 
 

 
#content { 
 
    position: absolute; 
 
    top: 10%; 
 
    display: block; 
 
    background-color: white; 
 
    width: 60%; 
 
    margin-left: 10%; 
 
    border: 1px solid black; 
 
} 
 

 
@media(max-width:650px) { 
 
    
 
#container { 
 
    background-image: none; 
 
    height: auto; 
 
} 
 
    #content { 
 
    position: relative; 
 
    width: 100%; 
 
    margin-left: 0px; 
 
    } 
 
    #content:before{ 
 
    content: ''; 
 
    display: block; 
 
    background-image: url("http://i.imgur.com/u4xZlez.png"); 
 
    background-repeat: no-repeat;  
 
    background-size: 100%; 
 
    padding-bottom: 61.54%; /* 400/650 */ 
 
    } 
 
}

<div id="container"> 
 
    <div id="content"> 
 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p> 
 
    </div> 
 
</div>

источник

2016-07-07 18:27:43 Dmitriy

Это изменение макета (с использованием '' вместо фонового изображения), которого я хочу избежать. – chiliNUT

@chiliNUT - обновленный ответ – Dmitriy

Вы устанавливаете процент, основанный на соотношении высоты и максимальной ширины, интересный! Это, похоже, тоже работает. – chiliNUT

Здесь ...

Но изображение уже не фон.

#container { 
 
    overflow:hidden; /* if desired */ 
 
       
 
    height:400px; 
 
    display:block; 
 
    position:relative; 
 
    width:100%; 
 
    max-width:650px; 
 
    border:1px solid red; 
 
      } 
 
#content { 
 
    position:absolute; 
 
    top:10%; 
 
    display:block; 
 
    background-color:white; 
 
    width:60%; 
 
    margin-left:10%; 
 
    border:1px solid black; 
 
} 
 
@media(max-width:650px){ 
 
    #content { 
 
    bottom:0px; 
 
    top:auto; 
 
    width:100%; 
 
    margin-left:0px; 
 
    } 
 
    /* This... */ 
 
    #content img { 
 
    width:100%; 
 
    position:absolute; 
 
    bottom:100%; 
 
    } 
 
}

<div id="container"> 
 
    <div id="content"> 
 
    <img src="http://i.imgur.com/u4xZlez.png" /> 
 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p> 
 
    </div> 
 
</div>

источник

2016-07-07 18:31:45 Martin

Это изменение макета (с использованием '' вместо фонового изображения), которого я хочу избежать. – chiliNUT

Тогда вам понадобится JS, чтобы проверить высоту '# content' и соответственно установить положение фона. В чистом CSS я боюсь, что я не знаю, как получить доступ к '# content' height без' 'будучи его дочерним ... – Martin

Спасибо, я понял, что может быть так. – chiliNUT

"push up" background over content with dynamic height

ответ

Смежные вопросы