Colocar uma imagem sobre a outra de background

[CajuCLC 1]

Pessoal, estou com essa dúvida.

Já tenho esse CSS para o background:

 

body { background:#00628e url(../images/body_bg.gif) 0 0 repeat-x; color:#2f2f2f; font:12px/1.55em arial, helvetica, sans-serif; text-align:center; }

Mas quero acrescentar outra imagem que vai ficar do lado esquerdo da tela sobre o outro background.

Como posso fazer isso?

Obrigado.

[Thiago Retondar 18]

Você pode criar uma div e posiciona-la onde quer ou usar img e posiciona-lo.

 

:thumbsup:

[CajuCLC 1]

Ok Thiago, tenho uma base aqui que seria essa:

 

div#page-body div.page-body-img {
	background: url(../../images/spring/page_bg_img.jpg) 50% 0 no-repeat;
}

Coloquei logo abaixo da que mostrei no tópico.

Para mim não apareceu nada.

Lembrando que estou usando o e-commerce Magento. (favor não mover para la, ja que a dúvida é de CSS).

Abs

 

Edit:

 

Estou deixando assim o código do CSS e só está aparecendo ele no meio.

Queria jogar mais para a esquerda:

/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @copyright  Copyright (c) 2008 Irubin Consulting Inc. DBA Varien (http://www.varien.com)
 * @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/******************************************/
/***********[ Mage_CSS_A Reset ]***********/
/******************************************/

* { margin:0; padding:0; }

body { background:#00628e url(../images/body_bg.gif) 0 0 repeat-x; background:#00628e url(../images/natal/ribbon.png) 0 0 no-repeat; color:#2f2f2f; font:12px/1.55em arial, helvetica, sans-serif; text-align:center; }

a { color:#1e7ec8; text-decoration:underline; }
a:hover { color:#1e7ec8; text-decoration:underline; }
a img { border:0;}
:focus { outline:0; }

/* Heading */
h1, h2, h3, h4, h5, h6, .head { margin-bottom:.4em; line-height:1.3em; color:#0A263C; }
h1 { font-size:2em; line-height:1.17; }
h2 { font-size:1.5em; }
h3 { font-size:1.35em; }
h4 { font-size:1.05em; }
h5 { font-size:1.05em; }
h6 { font-size:.95em; }

/* Table */
th { padding:0; text-align:left; vertical-align:top; }
td {padding:0;vertical-align:top;}

/* Paragraph */
p { margin-bottom:.8em; }
address { margin-bottom:.4em; }
address { font-style:normal; line-height:1.4em;}
cite { font-style:normal; font-size:10px;}
q:before, q:after{content:'';}

/* Form */
form { display:inline;}
fieldset { border:none; }
legend {display:none;}
label { color:#666; /*font-size:.95em;*/  font-weight:bold; }
input, select, button { vertical-align:middle; }

/* Lists */
dt { display:block; font-weight:bold; }
ul,ol { list-style:none; }

/* Size */
small { font-size:.92em; }
big { font-size:1.1em; }

hr { height:0; margin:8px 0; overflow:hidden; visibility:hidden; }
.nowrap { white-space:nowrap; }
.bold { font-weight:bold; }

[Thiago Retondar 18]

Tem um link? Fica mais fácil de ajudar.

 

:thumbsup:

[CajuCLC 1]

http://multitech.com.br/site

 

Parece que consegui

Mas queria colocar mais pra cima, menor....

E na logo, eu tenho uma foto aqui que sao bolas de natal.

Queria colocar dependurado... O.o

Abs

[angelorubin 142]

Bom dia,

 

Simplificadamente tentarei lhe explicar sobre o eixo Z, pois para um maior aprofundamento sugiro que leia um pouco sobre contexto de posicionamento.

 

No seu caso utilize a propriedade Z-INDEX que rege o empilhamento de caixas (box) no eixo Z, com isso você determina quais caixas ficam a frente.

 

Exemplo:

 

MARCAÇÃO

<div id="div_01"></div>
<div id="div_02"></div>
<div id="div_03"></div>

ESTILO

#div_01 {
z-index:1;
}

#div_02 {
z-index:2;
}

#div_03 {
z-index:3;
}

Com esta estilização teremos a DIV_03 à frente das outras devido a declaração da propriedade Z-INDEX, pois quanto maior o valor mais a frente é seu posicionamento em relação as outras no eixo Z.

 

Espero que ajude.

[Thiago Retondar 18]

Na verdade, para o z-index funcionar, precisa estar declarado o position.

 

Não consegui identificar dois background lá. Apenas um azul e uma imagem.

 

:thumbsup:

[CajuCLC 1]

Bom dia,Simplificadamente tentarei lhe explicar sobre o eixo Z, pois para um maior aprofundamento sugiro que leia um pouco sobre contexto de posicionamento.No seu caso utilize a propriedade Z-INDEX que rege o empilhamento de caixas (box) no eixo Z, com isso você determina quais caixas ficam a frente.Exemplo:MARCAÇÃO

<div id="div_01"></div><div id="div_02"></div><div id="div_03"></div>

ESTILO

#div_01 {z-index:1;}#div_02 {z-index:2;}#div_03 {z-index:3;}

Com esta estilização teremos a DIV_03 à frente das outras devido a declaração da propriedade Z-INDEX, pois quanto maior o valor mais a frente é seu posicionamento em relação as outras no eixo Z.Espero que ajude.

 

É mais complicado que isso para utilizar divs.Tenho que editar no proprio CSS.

Na verdade, para o z-index funcionar, precisa estar declarado o position.Não consegui identificar dois background lá. Apenas um azul e uma imagem. :thumbsup:

Na verdade so tem um mesmo.Mas li que da pra colocar 2 imagens assim.Pelo visto, esta funcionando.

body { background:#00628e url(../images/body_bg.gif) 0 0 repeat-x; background:#00628e url(../images/natal/christmas_tree.png) -50% 0 no-repeat; color:#2f2f2f; font:12px/1.55em arial, helvetica, sans-serif; text-align:center; }

[angelorubin 142]

Boa tarde,

 

Você tem razão Tiago, acabei me esquecendo do position para o funcionamento correto do z-index, agradeço pela correção.

 

Quanto ao EXEMPLO minha intenção era de passar o conceito do Z-INDEX, não de utilizar as DIV's do MODELO para resolver o problema, OK?

 

Acho que realmente não entendi seu problema, tinha como me explicar mais detalhado?

[CajuCLC 1]

Ja tem um fundo azul.

Queria colocar uma imagem por cima, mas deixando tudo azul.

Na verdade eh uma imagem azul escuro e vai clareando ate embaixo.

E queria colocar mais uma, de natal.

So ver o link como ficou.

Deixei o código do CSS, queria saber se esta certinho...

[Thiago Retondar 18]

Mas li que da pra colocar 2 imagens assim.

Onde você leu isso?

 

Você consegue colocar mais de um background com CSS3 - multiple backgrounds -, agora com CSS2.1 e dessa maneira que foi apresentada não tem como.

 

Se quer algo crossbrowser, o post do angelorubin é perfeito. Só seguir o modelo.

 

:thumbsup:

[CajuCLC 1]

Bom, nesse site diz que é para CSS2:

http://www.quirksmode.org/css/multiple_backgrounds.html

Eu não coloquei igual, mas parece que funcionou.

 

Ja o posto do angelorubin, teria como explicar direito, fiquei meio perdido.

Abs

[Thiago Retondar 18]

Não sei se essa técnica funciona - acho que não - porém ela não é validada.

 

Fazer o que deseja só da com CSS3.

 

Sobre o z-index, procure no Google algum tutorial para entender melhor.

 

:thumbsup:

[angelorubin 142]

Bom dia,

 

O que mais exatamente lhe causou dúvida em minha postagem?

[CajuCLC 1]

Tudo.

Pelo que você explicou e eu entendi, eu colocaria as infos no CSS e então chamaria as DIVS.

So que isso seria muito trabalho.

Se tivesse outra forma...

Ou você explicou e eu que nao entendi (oq realmente ocorreu hehehe).

 

Obrigado.

[Thiago Retondar 18]

Veja este tutorial, acho que você consegue entender melhor. Não é difícil trabalhar com z-index. Pode ser mais trabalhoso, mas não difícil.

 

:thumbsup:

[CajuCLC 1]

Veja este tutorial, acho que você consegue entender melhor. Não é difícil trabalhar com z-index. Pode ser mais trabalhoso, mas não difícil.

 

:thumbsup:

Thiago, agora entendi direitinho.

Mas tenho um problema ainda.

Meu CSS (um dos) é assim:

body { background:#00628e url(../images/body_bg.gif) 0 0 repeat-x; color:#2f2f2f; font:12px/1.55em arial, helvetica, sans-serif; text-align:center; }

Não tenho certeza, mas pelo menos o arquivo que parece chamar essa tag tem isso:

<body <?php echo $this->getBodyClass()?'class="'.$this->getBodyClass().'"':'' ?>>

Por isso estou me batendo.

No exemplo que você passou, o HTML do cara está assim:

 

 

<div id="ten_of_diamonds">  <img src="diamonds_10.gif" alt="10 of diamonds" width="70" height="96"> </div>  <div id="jack_of_diamonds"> <img src="diamonds_jack.gif" alt="Jack of diamonds" width="70" height="96"> </div>  <div id="queen_of_diamonds"> <img src="diamonds_queen.gif" alt="Queen of diamonds" width="70" height="96"> </div>  <div id="king_of_diamonds"> <img src="diamonds_king.gif" alt="King of diamonds" width="70" height="96"> </div>  <div id="ace_of_diamonds"> <img src="diamonds_ace.gif" alt="Ace of diamonds" width="70" height="96">  </div>

Toda em DIVs, mas não tem isso no meu.

Pelo menos ainda não vi.

Mas teria como colocar isso como está o php que botei do meu código?

 

Obrigado.

[Thiago Retondar 18]

Não entendi muito bem...

 

não precisa de div para trabalhar com z-index e também não da para trabalhar com z-index no body.

 

:thumbsup:

[CajuCLC 1]

OK, entao teria que colocar isso na CSS?

Mas o tutorial que você me passou, ele criou divs no CSS e colocou no html dele por divs.

[Thiago Retondar 18]

Mas o tutorial que você me passou, ele criou divs no CSS e colocou no html dele por divs.

Vamos lá: não tem como criar div no CSS... Você cria no HTML e estiliza no CSS.Estude melhor o escopo, ou seja, o significado do z-index, e vai ver que pode usar em qualquer elemento. :thumbsup: