div container background-image

Я создал контейнер div. Этот контейнер должен получить фоновое изображение. Изображение - 1200 x 64 пикселей. Если я пишу что-то в контейнере div, 1 изображение должно быть полностью отображено. И если я пишу текст над высотой 70 пикселей, должны быть полностью показаны 2 изображения. На данный момент, я должен дать контейнер фиксированной высотойdiv container background-image

Вот my Page + the image и вот код:

*{ 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.div_mit_background { 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    
 
    width: 1200px; 
 
    
 
    background-image: url('http://img3.fotos-hochladen.net/uploads/background7j0b6tzhl1.png'); 
 
    height: 200px; 
 
} 
 

 
p{ 
 
    margin-left: 64px; 
 
    color: white; 
 
    padding-top: 20px; 
 
}

<html> 
 
    <head> 
 
     <link href='index.css' rel='stylesheet' type='text/css'> 
 
    </head> 
 
    
 
    <body> 
 
     <div class="div_mit_background"> 
 
      <p> 
 
       Here is some content. 
 
      </p> 
 
     </div> 
 
    </body> 
 
</html>

источник

2015-01-20 Skeptar

Является ли этот фон повторным свойством или чем-то более сложным? Если это что-то более сложное (вы хотите, чтобы высота элемента всегда была x * 64px, вы должны использовать javascript для этого ... Или установить строку-высоту ... –

Да, это правильно. Является ли этот код кодом JavaScript? – Skeptar

Одно из возможных решений, если все, что вам нужно сделать, это чтобы показать полное фоновое изображение в случае новой линии, должно быть выполнено следующее:

удалить padding-top из CSS-кода p tag
добавьте это в CSS-тег p: line-height:64px;, чтобы высота линии была такой же, как высота фонового изображения, и либо одно изображение будет отображаться, либо два (не полтора и т. Д.) .)

вот обновленный CSS для тега p.

p{ 
    margin-left: 64px; 
    color: white; 
    line-height:64px; 
}

и для заполнения или поля слева или справа вы можете установить их по своему усмотрению.

и не забудьте установить высоту .div_mit_background как height:auto; вместо 200px.

надеюсь, что это поможет.

источник

2015-01-20 19:46:07 i333

Но я Я не уверен, что он хочет иметь высоту линии 64px в своем абзаце –

Я согласен, что это может быть не лучшее решение, но единственное, что я нашел до сих пор, не используя JS. @Sketpar: если бы вы могли подтвердить, это работает для вас или нет, так что я могу искать другие решения в то же время. – i333

Эй, спасибо за ответ и комментарии :) Его правда, я не хочу иметь высоту строки от 64 пикселей. Может быть, вы можете помочь мне с JavaScript? Или вы могли бы дать мне несколько ключевых слов? Тогда я могу искать самостоятельно. Но вы мне тоже поможете: D – Skeptar

div container background-image

ответ

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