estendendo fronteiras

Question

Eu tenho uma imagem que será centrado (esquerda e direita) na janela, não há nenhuma borda esquerda, mas há uma borda direita. Eu queria saber se é possível para a borda superior para ir desde o esquerdo da página (após a imagem) e parar na fronteira direita e para a borda inferior para começar no final esquerdo da imagem e alongamento em todos os caminho para a direita da janela. Parte superior e inferior bordas são feitas de dois fundos de repetição diferentes e da fronteira esquerda pode ser também, se necessário.

Eu estive pensando sobre isso por um tempo, mas não conseguiu chegar a qualquer soluções ... alguém pode me ajudar?

Answer 1

Você pode querer esclarecer como flexível você está disposto a ser. Você pode se aproximar isso várias maneiras. Você quer o bordas superior e inferior para estender para a borda da janela de visualização (necessitando-os assim a ser fluido de largura)?

Você pode lidar com isso usando imagens de fundo com background-position e uma técnica de porta de correr, ou você pode usar marcação estranhos para criar um três-coluna layout de largura fluido com a sua imagem no centro.

É até você, mas com a técnica de três colunas, você pode inserir o seu divs extras (ou o que você gostaria de usar) via JavaScript para que você não teria recipientes vazios em sua fonte e uso border-top e border-bottom em vez de imagens de fundo (derramamento, assim, alguma carga-tempo fora da página).

Editar: E para esclarecer, você quer que algo parecido com este desenho Ascii:

_______________
               |img|_____________________

Editar : Para o layout largura fluido, consultar um dos muitos inúmeras fontes na CSS Layouts, aqui está um bom resumo: http://www.smashingmagazine.com/2007 / 01/12 / free-CSS-layouts-and-templates /

Em seguida, em suas colunas esquerda e direita, você faria border-top e border-bottom respectivamente (ou o uso do fundo-imagens se você quiser fronteiras mais extravagantes), dar a sua imagem fronteiras e ter a altura de seus três recipientes definidos assim as fronteiras alinhar juntos . Espero que ajude.