Utilizar imagem 100% como fundo da div

Oi Rafael, não sei se entendi ao certo, vc diz que a imagem está se repetindo?

Se for esse o problema coloque também:

background-repeat: no-repeat;

Vc também tem outras propriedades que pode usar com imagens de fundo. Segue alguns exemplos.

background-size: 100%; background-position: center;

Como não sei se te respondi precisamente, qqr coisa pode perguntar.

Abraço!

pode mandar exatamente o que voce esta precisando? está um pouco vago sua pergunta. vlw

Como não consigo inserir imagem, criei o desenho abaixo para expor minha dúvida:

____________.........
|           |        :
|           |        :        
|___________|        :
:                    :
:....................:

Considerando que o quadrado menor é a minha div, a imagem de fundo é posicionada conforme a imagem formada por pontos.

Ilustrando minha dúvida, criei uma imagem https://1drv.ms/i/s!AsRnm1QQ3XuPiIIGh1du31JZm_L7KQ

Gostaria que a imagem fosse exibida no fundo da div, conforme o tamanho original.

Espero ter sido claro.

Isso é estranho, a imagem de fundo fica de fundo da sua div, certo? Ela deveria se adequar ao tamanho da div, e não extrapolar esse tamanho.

Vc poderia me passar esse código e a imagem pra eu ver o que está acontecendo?

Abraço!

CSS:

.destaque1{
    background-image: url('../image/trib.jpg'); 
    background-size: 100%;
    border-radius: 15px;
    height: 260px;   
    padding-right: 10px;
    margin-right: 5px;
}

HTML onde a classe usada:

<div class="container">             
            <!-- DESTAQUE INICIO-->              
              <div class"container">
                <div class="row">
                    <a href="#">
                    <div class="col-md-6 destaque1 fade"> 
                        <div class="titulo-destaque1">Receita Normatiza Consolidação de Débitos do REFIS</div>
                    </div>
                    </a>

                    <a href="#">
                    <div class="col-md-5 destaque2 fade"> 
                        <div class="titulo-destaque2">Novo salário mínimo</div>
                    </div>
                    </a>
                    <a href="#">    
                    <div class="col-md-5 destaque3 fade"> 
                        <div class="titulo-destaque3">TNU cancela enunciado da Súmula nº 51</div>
                    </div>
                    </a>    
                </div>
            </div>

Rafael, no seu css tenta fazer o seguinte:

Retire a propriedade background-size.

Adicione a propriedade:

background-position: center

Veja se gera o resultado esperado.

A questão aí em cima é parar de forçar o tamanho da imagem, deixa que ela se ajeita, fora isso, força pra posicionar ela bem no centro da sua div (:

Abraço!

Rafael, você pode usar a propriedade

background-size: cover;

Segue exemplo: https://codepen.io/lucasbeskow/pen/mBJoWJ

Lucas, mesmo no exemplo é possível ver que a imagem não é exibida no tamanho real no fundo da div, ela não é exibida 100%. É possível fazer com que ela seja exibida no tamanho real?

Rafael, a proporção da imagem e da DIV são diferentes, a imagem tem a proporção mais quadrada, a DIV mais retangular.

Com a propriedade background-size: cover; ela completa a imagem com a dimensão menor (largura, neste caso) e estoura a maior (altura). Por isso a imagem não é exibida na sua totalidade.

É possível exibir a imagem na totalidade da DIV (retangular), mas ira distorcer a imagem, ou podemos alterar a proporção da DIV para ficar de acordo com a imagem.

Atualizei o exemplo com as novas opções: https://codepen.io/lucasbeskow/pen/mBJoWJ