Entrar Ainda não tem acesso?
2
respostas

Porque o professor usou background no body e para por um ícone no input ele usou Background-image?

Referente ao curso Guia de estilos: montando páginas com componentes, no capítulo Os primeiros componentes e atividade O input

por Diógenes Bahia Bezerra
| 124.5k xp | 130 posts

Por que o professor usou background para adicionar uma imagem no body?

Teria diferença se ele tivesse colocado no body background-image?

body {

    font-family: var(--familia-corpo);
    font-size: var(--tamanho-corpo);

    background: url(../../img/fundo-textura.png), url(../../img/fundo-linhas.png);

    background-position: center;

}

O professor usou background-image para colocar um ícone dentro de um input.

Eu errei. Por conta do professor ter usado apenas background para adicionar uma imagem no body eu coloquei apenas background no input para adicionar o ícone. O problema que ocorreu foi que a propriedade background-repeat não funcionou.

Se os 2 eu consigo adicionar imagem, qual a diferença entre background e background-imagem?

Porque a propriedade background-repeat não funcionou quando usei background para adicionar o ícone?

.input--icone {
    padding-left: 4.25rem;

    background-repeat: no-repeat;

    background-position: left 1.75rem center;
}

.input--email {
    background-image: url(../../img/icones/mail.svg); 
}
2 respostas
por Gabriel Poton dos Santos
| 57.6k xp | 17 posts

Fala Diógenes, beleza?!

A propriedade "background" é uma forma unificada para declararmos todos os valores de background. Por exemplo, podemos escrever as propriedades de forma mais específica (uma por uma):


div {
    background-color: #ffffff;
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}

ou declarar um ou mais valores dentro da propriedade genérica "background":


div {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

Caso minha explicação não tenha ficado clara, deixo um link para que você possa se aprofundar um pouco mais :

https://www.w3schools.com/css/css_background.asp

Espero ter ajudado.

Bons estudos!

por Diógenes Bahia Bezerra
| 124.5k xp | 130 posts

Opa, vlw!

Eu até entendi que "background" é um shorthand.

No body ele usou "background" apenas e chamou 2 URLS e no input ele chamou "background-image" e chamou 1 URL. Ele não colocou no "background" outros valores, apenas 2 URLS.

Como ele não colocou mais valores no shorthand, eu fiquei pensando se teria alguma diferença prática na aplicação, entende?