Pergunta

Trabalho nisso há algumas horas e não consigo entender a cabeça. Eu tenho três imagens, abaixo, e gostaria que o conteúdo de texto fique em cima delas, mas como faço isso?
A imagem do meio é a imagem que precisaria repetir à medida que a div contêiner se expande.

Ok, peço desculpas pela minha falta de informação, é um pouco tarde e não estou pensando exatamente. Eu gostaria de incluir um contêiner com as três imagens. A altura mínima deste contêiner seria a imagem superior e inferior. À medida que o conteúdo começa a transbordar essa altura mínima, a imagem do meio começaria a se repetir para acomodar mais altura.

Topo:TEXTO DE ALT HTTP://files.droplr.com/files/45544730/indf3.page.png

Repetição média:TEXTO DE ALT HTTP://files.droplr.com/files/45544730/ine5i.page-tile.png

Fundo:TEXTO DE ALT HTTP://files.droplr.com/files/45544730/infbt.page-bottom.png

Foi útil?

Solução

minha solução:

Eu costumo fazer assim:

<div class="box">
  <span class="header"></span>
  content
  <span class="bottom"></span>
</div>

CSS:

.box { background: url(middle.png) repeat-y left top; }
  .box .header { background: url(top.png) no-repeat; display: block; margin-bottom: -480px; /* +set height and width */}
  .box .bottom { background: url(bottom.png) no-repeat; display: block; /*+ height and width*/}

Geralmente, o fundo da div é tão pequeno que não há problema em deixá -lo em branco (adicionar espaçamento ao design inteiro). Além disso, o tamanho negativo da margem -fundo deve ser: -(height - what_you_want_to_remain_empty) - ou seja, se o seu .box .header imagem tem 540px E você quer sair do topo 50px vazio, você vai definir -490px Como eu tinha.

Boa sorte.

Outras dicas

TRY FOLLOWING

<div style="background:url(../top.png) no-repeat;">
  Top
</div>

<div style="background:url(../middle.png)">
  Middle:
</div>

<div style="background:url(../bottom.png) no-repeat;">
  Bottom
</div>

Dê aula em vez disso e manuseie -a em suas folhas de estilo

<div class='top'>
</div>
<div class='middle'>
</div>
<div class='bottom'>
</div>

Dê a cada um div separado background Estilo CSS.

Mas eu sugeriria,
Dar background estilizando o texto div, juntamente com box-shadow e border.
Nesse caso, você precisará apenas do meio imagem.

Ter o código até agora seria útil, mas vou dar um giro.

Você precisará de um contêiner para cada imagem.

<div class="head"></div>
<div class="text">TEXT HERE</div>
<div class="foot"></div>

--CSS--

div.head { 
  background-image:url('top.png');
  background-repeat:no-repeat;
}
div.text {
  background-image:url('middle.png');
  background-repeat: repeat-y;
}
div.foot {
  background-image:url('bottom.png');
  background-repeat:no-repeat;
}

Eu provavelmente gostaria de criar a primeira imagem sobre o mesmo tamanho da última imagem e deixar a segunda imagem preencher conforme necessário.

Eu acho que na resposta de Seth M, você precisa fornecer altura para a parte superior (cabeça) e inferior (pé) div.

então funcionará corretamente.

div.box:before {content:url(top.png);}
div.box {
  background-image:url(middle.png) repeat-y;
  width:?;
  margin:0;
  padding:0;
}
div.box:after {content:url(bottom.png);}

É uma coisa interessante, que coloca as fotos superior e inferior como imagens dentro da caixa, mas sempre primeiro e último. Claro que não funciona se você tiver margens ou remendos, mas tente fazer isso também:

div.box > div {padding:10px;}

<div class="box"><div>
  Content goes here
</div></div>

Isso deve dar a você exatamente o que você deseja, de uma maneira estranha. Cuidado com os navegadores mais antigos não suportarão essas regras CSS.

Aqui está um código FUL com HTML/CSS usando as imagens que você postou. A parte do cabeçalho é bastante 'alta'. Presumo que faça parte do seu design.

<html>
<head>
<style type="text/css">
div.top, div.body, div.footer {
margin: 0 auto;
width: 844px;
color: #ffffff;
background-color: #666666;
padding-left: 10px; /* edit accordingly */
}

div.top {
background: url(http://files.droplr.com/files/45544730/INDf3.Page.png) no-repeat;
height: 426px;
}
div.body {
background: url(http://files.droplr.com/files/45544730/INE5i.Page-Tile.png) repeat-y;
height: 200px;
}
div.footer {
background: url(http://files.droplr.com/files/45544730/INFbt.Page-Bottom.png) no-repeat left bottom;
height: 100px;
}
</style>
</head>
<body>
<div class="top">top
</div>
<div class="body">body
</div>
<div class="footer">footer
</div>
</body>
</html>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top