Adicionando uma imagem de plano de fundo a um elemento <div>

170

É possível fazer um <div>elemento conter uma imagem de plano de fundo e, se sim, como eu faria isso?

html Sandeep
fonte

Respostas:

204

Você quis dizer isso?

<style type="text/css">
.bgimg {
    background-image: url('../images/divbg.png');
}
</style>

...

<div class="bgimg">
    div with background
</div>
phoibos
fonte
posso defini-lo como não repetível?
Valentino Ru
12
sim: repetição em segundo plano: não repetição; w3schools.com/cssref/pr_background-repeat.asp
Matt Becker
42

Você pode fazer isso usando as backgroundpropriedades do CSS . Existem algumas maneiras de fazer isso:

Por ID

HTML: <div id="div-with-bg"></div>

CSS :

#div-with-bg
{
    background: color url('path') others;
}

Por classe

HTML: <div class="div-with-bg"></div>

CSS :

.div-with-bg
{
    background: color url('path') others;
}

Em HTML (que é ruim)

HTML: <div style="background: color url('path')"></div>

Onde :

  • cor é cor em hexadecimal ou uma das cores X11
  • caminho é o caminho para a imagem
  • outros gostam de posição, fixação

background Propriedade CSS é uma conexão de todas as propriedades xxx de plano de fundo nessa sintaxe:

fundo : cor de fundo imagem de fundo repetição de fundo anexo de posição de fundo ;

Fonte: w3schools

Robik
fonte
Eu quero usar o método HTML, mas é possível, usando apenas esse método, adicionar 2 imagens que estão localizadas de maneira diferente. Eu sei que é possível fazer algo como: background-image: url ("image.jpg"), url ("image2"); mas, fazendo isso, as duas imagens estarão no mesmo lugar, meio que "se sobrepondo", e eu quero definir posições diferentes para elas.
PaulP1
32

Sim :

<div style="background-image: url(../images/image.gif); height: 400px; width: 400px;">Text here</div>
Instantâneo
fonte
14

Use esse estilo para obter uma imagem de fundo centralizada sem repetição.

.bgImgCenter{
    background-image: url('imagePath');
    background-repeat: no-repeat;
    background-position: center; 
    position: relative;
}

Em HTML, defina este estilo para sua div:

<div class="bgImgCenter"></div>
jegadeesh
fonte
10

Use como ..

<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;">Example of a DIV element with a background image:</div>
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;"> </div>
Anand Thangappan
fonte
Certamente o caminho deve estar entre aspas simples?
21419 Shane G
7

Você pode simplesmente adicionar um atributo img src com o ID:

<body>
<img id="backgroundimage" src="bgimage.jpg" border="0" alt="">
</body>

e no seu arquivo CSS (fundo esticado):

#backgroundimage
{
   height: auto;
   left: 0;
   margin: 0;
   min-height: 100%;
   min-width: 674px;
   padding: 0;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: -1;
}
Adam Sandler
fonte
2
A questão é adicionar um elemento de plano de fundo a uma div, não adicionar um atributo img separado, para que isso não forneça uma resposta para a pergunta.
Dipen Shah
3
Embora essa solução não responda adequadamente à pergunta, ela me deu uma idéia para outro problema que eu estava enfrentando, e por isso agradeço.
Striker
6 
<div class="foo">Foo Bar</div>

e no seu arquivo CSS:

.foo {
    background-image: url("images/foo.png");
}
Darin Dimitrov
fonte
2 
<div id="imgg">Example to have Background Image</div>

Precisamos adicionar o conteúdo abaixo na tag Style:

.imgg(

   background-image: url('C:\Users\ajai\Desktop\10.jpg');

)
Guvaliour
fonte
Seu caminho local: C: \ Users \ ajai \ Desktop \ 10.jpg nunca funcionará online;)
AlmostPitt
Apenas a vibração i dar este caminho
Guvaliour
0

Na maioria das vezes, o método é o mesmo que definir todo o corpo

.divi{
    background-image: url('path');
}

</style>

<div class="divi"></div>
Winston Brown
fonte