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

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