Este é o décimo terceiro post da nossa série de tutoriais que vai te ajudar a criar sua primeira página web de forma profissional com HTML e CSS. Então, neste artigo vamos te ensinar como fazer image html background, ou seja, colocar uma imagem de fundo personalizada com CSS.
Mas é claro, também temos um conteúdo em nosso blog que explica o que é CSS e como ele é utilizado no desenvolvimento de websites. Confira o seguinte artigo:
Conteúdo
Introdução sobre image HTML background
O HTML é a principal linguagem para a construção de páginas web, enquanto o CSS é fundamental para criar um layout atraente e personalizado, é essencial entender como utilizar as propriedades de estilo. Logo, uma dessas propriedades é o background, que permite definir a cor ou imagem de fundo de um elemento HTML.
No caso das imagens de background, é possível utilizar diversas opções, como imagens repetidas, imagens em tamanho completo, imagens com opacidade, entre outras.
Utilizar imagens de background bem escolhidas pode ser uma maneira efetiva de criar um impacto visual positivo em suas páginas web. Portanto, nesta introdução, exploraremos como utilizar imagens de background em HTML para criar designs mais interessantes e atraentes.
Caso também queira saber como usar a tag <img> ou <figure> temos um artigo completo, então confira agora como colocar imagem na sua página HTML.
O que preciso saber antes de começar? image HTML background
Antes de começar a utilizar imagens de background em HTML, é importante ter em mente alguns pontos importantes. Pois é necessário escolher uma imagem adequada para o contexto, garantindo que ela seja de boa qualidade e que não prejudique a legibilidade do conteúdo.
Além disso, é preciso estar ciente das diferentes opções de posicionamento e repetição da imagem, bem como das propriedades de opacidade e escala. Então, com essas considerações em mente, é possível criar designs atraentes e efetivos usando imagens de background em HTML.
Como colocar uma imagem HTML no background
Para colocar uma imagem HTML no background, é necessário utilizar a propriedade “background-image” em conjunto com a URL da imagem desejada. Também é possível definir outras propriedades, como repetição e posicionamento, para personalizar o resultado final.
Sintaxe background image
A sintaxe para utilizar a propriedade background-image em CSS é a seguinte:
Seletor{background-image: url(‘caminho/para/imagem.jpg’);}
A URL deve apontar para a imagem desejada. Outras propriedades podem ser adicionadas separando-as por ponto-e-vírgula.
Image HTML background
Image HTML background se refere a uma imagem que é utilizada como fundo de um elemento HTML.
Usando CSS para colocar uma imagem HTML no background
Além de utilizar a propriedade “background-image” em HTML, é possível também definir estilos de imagem de background utilizando CSS. Pois, isso permite uma maior personalização do layout, com opções como tamanho, posicionamento, repetição, opacidade e filtros. As propriedades CSS são adicionadas ao seletor de estilo desejado, como, por exemplo:
div{
background-image: url('caminho/para/imagem.jpg');
background-size: cover;
background-position: center;
}
Agora vamos além do básico, descubra a seguir, outras propriedades incríveis do background-image em HTML para criar designs ainda mais impressionantes em suas páginas web.
Background Url
A propriedade correta para utilizar uma imagem de background é “background-image”, seguida da URL da imagem desejada. Como no exemplo a seguir:
background-image: url(‘caminho/para/imagem.jpg’);
Background Position
A propriedade “background-position” permite definir a posição de uma imagem de background em relação ao elemento HTML que a contém. É possível utilizar valores como “top”, “bottom”, “center” ou coordenadas em pixels.
Background Repeat
A propriedade “background-repeat” permite definir a repetição de uma imagem de background em relação ao elemento HTML que a contém. Assim, é possível utilizar valores como “repeat”, “no-repeat”, “repeat-x” e “repeat-y”. A opção “space” pode ser utilizada para preencher o espaço disponível com repetições da imagem sem distorcê-la.
Background Size
A propriedade “background-size” permite definir o tamanho da imagem de background em relação ao elemento HTML que a contém. É possível utilizar valores como “auto”, “contain” ou valores em pixels ou porcentagem. Além disso, é possível utilizar a opção “cover” para dimensionar a imagem para cobrir completamente o elemento HTML, ou “50% 50%” para definir o centro da imagem como ponto de ancoragem.
Background Attachment
A propriedade “background-attachment” permite definir se uma imagem de background deve se mover junto com o conteúdo de uma página web ou permanecer fixa em relação à janela do navegador. É possível utilizar valores como “scroll”, “fixed”, “local” e “initial”. A opção “fixed” é comumente utilizada para criar efeitos de paralaxe.
Background Color
A propriedade “background-color” permite definir a cor de fundo de um elemento HTML. Ela pode ser utilizada em conjunto com a propriedade “background-image” para criar um fundo com cor e imagem.
A propriedade “background-image” também pode ser utilizada para criar fundos com degradê. É possível definir duas ou mais cores e a direção do degradê utilizando a sintaxe “linear-gradient()” ou “radial-gradient()”
div{
background-image: linear-gradient(to bottom right, #3366ff, #66ccff);
background-image: url('imagem-de-fundo.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
background-color: #ffffff;
}
Conclusão – Image HTML background
Em suma, a propriedade “background-image” do CSS é uma poderosa ferramenta para criar fundos personalizados em páginas web. Além da opção de utilizar uma imagem de fundo, é possível adicionar cores, degradês, ajustar a posição, tamanho, repetição e comportamento do fundo ao rolar a página.
Portanto ao combinar essas propriedades pode criar efeitos incríveis e únicos, tornando a página mais atraente e profissional. Ao aprendendo a utilizar essas propriedades, você pode explorar todo o potencial do background em suas páginas web.
Você também pode aprimorar mais suas páginas com imagens, para isso siga o guia:
Demostração e código final – Image HTML background
Este é apenas um exemplo básico de como colocar uma imagem de fundo com CSS ou image HTML background. Lembre-se que as possibilidades são muitas e a aparência de cada seção pode ser personalizada conforme as necessidades do seu projeto.
<div class="imagem-de-fundo"><div>
.imagem-de-fundo {
background-image: url('fundo.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: contain;
background-color: #ffffff;
}
Como se tornar um desenvolvedor Web?
Certamente deve estar animado para começar a sua jornada, saiba que estou focado para fazer conteúdos excepcionais que irão te ajudar! Então não perca tempo e cadastre-se logo abaixo para não perder nenhuma novidade e ficar sempre por dentro
- Publicado em
- Ultima modificação em 21/01/2024
