• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

jotix

[Ajuda] Como continuar um background adicionando outra e diferente imagem?

3 mensagens neste tópico

Pretendia adicionar uma imagem a um background que desse continuidade a este.

O site http://www.zubux.com tem como background uma imagem de uma colmeia, e pretendia adicionar no terminus do site outra imagem distinta da tal colmeia amarela.

hu23r4.jpg

O código css respeitante ao background da colmeia é este:

body {
    background-image: url(http://i35.tinypic.com/hu23r4.jpg);
color: #333;
margin: 0;
padding: 0;
font: 16px/1.5em arial, helvetica, verdana, sans-serif;

Pretendia portanto, e tal como disse, adicionar no terminus do site esta imagem (no centro):

8zek8z.jpg

Como a imagem é pequena em  largura para cobrir toda a largura do site e isto vai depender de cada monitor de computador, terei de adicionar em cada um dos lados esta imagem e fazê-la repetir n vezes:

width=750 height=317http://i34.tinypic.com/2wp1na1.jpg[/img]

Graças a amabilidade do Nazgulled(e note-se que ele nem costuma ter grande amabilidade)  montou-me uma maquete do projecto:

width=499 height=750http://i33.tinypic.com/2cy5cid.jpg[/img]

Como posso fazer isto acontecer na aplicação ao css?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Só se no fim do site adicionares isto:

<div id="fimdosite"> </div>

e com o seguinte CSS

#fimdosite {
background: url('caminho/para/a/imagem.ext') repeat-x bottom center;
height: <alturaDaImagem> px;
width: 100%;
}

Substituindo o valor do height para o valor correspondente, assim como o caminho da imagem. Atenção que isto não coloca a DIV no fundo, mas sim depois do site. O que numa resolução gigante, pode não aparecer no fim do site.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

não consegues ter duas imagens distintas no background de nenhum elemento...

penso que só conseguirás fazer isso de duas maneiras:

se quiseres colocar texto sobre essa imagem:

criando uma div que servirá de footer e colocar-lhe como background centrado a imagem que tens acima (casa, animais e fundo)  mas já acrescentada nos lados de modo a ficar com largura suficiente para as resoluções grandes...

se não quiseres colocar texto sobre essa imagem:

crias a mesma div, colocas como background a imagem que se vai repetir e depois, como conteúdo centrado da div, a imagem da casa e dos animais mas com fundo transparente...

podes também dar uma ligeira transparência à parte amarela da imagem para se misturar com a do background do body e não se notar o corte nas linhas dos hexágonos...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora