Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

CajuCLC

Colocar uma imagem sobre a outra de background

Por , em Desenvolvimento frontend

Recommended Posts

CajuCLC    1

CajuCLC
Postado

Thiago, eu ja entendi isso.

Mas no caso o arquivo é um PHP e que não tem divs.

Eu não quis dizer criar div no CSS.

La no tutorial o CSS do cara é assim:

 

#ten_of_diamonds {
	position: absolute;
	left: 100px;
	top: 100px;
	z-index: 1;
}

#jack_of_diamonds {
	position: absolute;
	left: 115px;
	top: 115px;
	z-index: 2;
}

#queen_of_diamonds {
	position: absolute;
	left: 130px;
	top: 130px;
	z-index: 3;
}

#king_of_diamonds {
	position: absolute;
	left: 145px;
	top: 145px;
	z-index: 4;
}

#ace_of_diamonds {
	position: absolute;
	left: 160px;
	top: 160px;
	z-index: 5;
}

E o HTML 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>

Ele cria o CSS e "chama" com as divs no HTML.

Só que no meu caso não tem isso.

Só chama o css e a parte do background já está automático.

Ou seja, posso criar o CSS como do tutorial, mas não teria onde "chamar" as informações.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Thiago, eu ja entendi isso.

Não entendeu não... =/Suponhamos que você tenha somente a tag img e uma div para sobrepor. Então ficaria algo assim: 
<img src="segundoBackground.jpg" alt="Background" id=secondBg" /><div id="container"><!-- Content --></div>
No CSS iria ser assim: 
body{background: url() [position] no-repeat;}img#secondBg{position: absolute;top: 0;left: 50px;z-index: 1;}div#container{position: relative;z-index: 2;}
:thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

CajuCLC    1

CajuCLC
Postado

Então tá;

Tenho o arquivo que "chama" o background.

Ele é assim:

 

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

Como vou colocar isso ai?

Compartilhar este post

Link para o post
Compartilhar em outros sites

CajuCLC    1

CajuCLC
Postado

Bom, o CSS que contem o background esta assim:

 

 

/**
 * 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/natal/d3-bgpattern.png) 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; }

Compartilhar este post

Link para o post
Compartilhar em outros sites

CajuCLC    1

CajuCLC
Postado

O CSS com as duas imagens ficaria assim:

/**
 * 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/natal/d3-bgpattern.png) repeat; background:#00628e url(../images/natal/bow_with_tinklers.png) 50% 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; }

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

 

 

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

 

 

Ahh, cara, você não tirou proveito nenhum do tópico.. Imagem Postada

 

Vou reexplicar tendo como base este HTML:

 

<body><img src="http://teteraconsultoria.com.br/infoescravo/arquivos/2009/03/macbook-white.jpg" alt="Background que vai sobrepor o outro!" id="secondBg" /><div id="container">	<!-- Conteúdo da página aqui! --></div></body>
:seta: no body você irá colocar o background.

:seta: no #secondBg o background que vai sobrepor.

:seta: no #container você só vai trabalhar com o position e z-index.

 

Ficará assim:

 

 

 

*{	margin: 0;	padding: 0;}body{	background: url(http://windowsxpstuff.files.wordpress.com/2009/03/space.jpg);}img#secondBg{	position: absolute;	top: 25px;	left: 50px;	z-index: 1;}div#container{	width: 800px;	background: #cecece;	height: 250px; /*Coloquei só para ser visualizado*/	position: relative;	z-index: 2;	margin: 0 auto;}
É só copiar e colocar o código para ver o resultado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

CajuCLC    1

CajuCLC
Postado

é, so que o problema é que é u PHP e aqui como ele pega o background do CSS:

 

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

Eu ja entendi como funciona, ja testei e realmente funciona.

Mas no meu caso, como iria colocar nesse PHP ai?

Compartilhar este post

Link para o post
Compartilhar em outros sites

CajuCLC    1

CajuCLC
Postado

Bom, pelo que sei pelo que li. hahaha

Ele puxa justamente o body do CSS.

É o magento, é tudo assim.

Todas as imagens, links, etc, todos são assim.

Compartilhar este post

Link para o post
Compartilhar em outros sites

CajuCLC    1

CajuCLC
Postado

Thiago, estou conseguindo. hehehe

Olha como ficou minha CSS:

 

* { margin:0; padding:0; }

body{
        background:#00628e url(../images/natal/d3-bgpattern.png) repeat; color:#2f2f2f; font:12px/1.55em arial, helvetica, sans-serif; text-align:center;
}
img#secondBg{
        position: relative;
        top: 25px;
        left: 50px;
        z-index: 3;
}
div#enfeite{
        width: 1250px;
        background: url(../images/natal/christmas_tree2.png) no-repeat;
        position: relative;
        z-index: 1;
        margin: 0 auto;
}

E o código PHP:

 

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

 

Minha maior dúvida é, quando colocamos o widht, como sabemos onde cada lugar é o pixel certo?

Eu fico aqui testando e testando e nada.

Já tentei acrescentar uma outro imagem do outro lado do site e nada.

O Site:

http://www.multitech.com.br/site

 

Bom, porém já consegui o que queria primeiro, né?

Obrigado mesmo, fico na resposta ai da pergunta.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

No seu caso o posicionamento não deu muito certo por que você colocou o segundo background em uma div que engloba toda a página... Logo, não dá para manipular sua largura e altura com precisão. Crie uma div para essa árvore de natal e coloque o width e height certos e depois você já sabe o que fazer...

 

:thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

CajuCLC    1

CajuCLC
Postado

Thiago, tenho so uma dúvida.

Pra que serve isso:??

 

img#secondBg{
        position: relative;
        top: 25px;
        left: 50px;
        z-index: 3;
}

E a div que eu criei para a arvore, no caso enfeite, esta certinha mesmo?

Compartilhar este post

Link para o post
Compartilhar em outros sites

CajuCLC    1

CajuCLC
Postado

Ok, sobre seu post anterior, eu teria que criar uma div e colocar ali, mas eh esse o problema.

Tem 4 arquivos, todos eles sao os que alteram imagens, etc.. digo, onde "puxa" as informações do css.

Entao so tem nele mesmo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Não, cara... =/

 

Seria para ficar assim:

 

HTML

<body class=" cms-index-index cms-home"> <div id="enfeite"> <!-- Delete isso e coloque: <img src="http://multitech.com.br/site/skin/frontend/default/f001/images/natal/christmas_tree2.png" alt="Imagem secundária!" /> ///// ou faça feche essa div aqui mesmo, ou seja, sem englobar o site todo --><div class="wrapper">         <noscript>         <div class="noscript">             <div class="noscript-inner">                 <p><strong>We detected that your JavaScript seem to be disabled.</strong></p>                 <p>You must have JavaScript enabled in your browser to utilize the functionality of this website.</p>             </div>         </div>     </noscript>         <!-- start header -->         <div class="header">

É uma boa dar uma re-lida nos posts para entender como vai funcionar, pois parece que não entendeu muito bem...

 

:thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

CajuCLC    1

CajuCLC
Postado

Eu vou tentar fazer mais alguns testes, mas acho que você ainda nao entendeu que nao estamos lidando com um HTML simples e sim com um PHP.

 

No caso da div enfeite, você quer que eu tire e coloque a imagem? E como determinar onde ela vai ficar?

E como disse, tem vários arquivos... Pq eu posso escolher 1 so coluna, 2 com barra direita ou esquerda ou 3 colunas.

Entao tem que alterar em todos os arquivos.

Obrigado.

:natallaugh:

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito