CSS - Fundos
Este capítulo ensina como definir planos de fundo de vários elementos HTML. Você pode definir as seguintes propriedades de fundo de um elemento -
o background-color propriedade é usada para definir a cor de fundo de um elemento.
o background-image propriedade é usada para definir a imagem de fundo de um elemento.
o background-repeat propriedade é usada para controlar a repetição de uma imagem em segundo plano.
o background-position propriedade é usada para controlar a posição de uma imagem no fundo.
o background-attachment propriedade é usada para controlar a rolagem de uma imagem em segundo plano.
o background propriedade é usada como uma abreviação para especificar várias outras propriedades de fundo.
Defina a cor de fundo
A seguir está o exemplo que demonstra como definir a cor de fundo de um elemento.
<html>
<head>
</head>
<body>
<p style = "background-color:yellow;">
This text has a yellow background color.
</p>
</body>
</html>Isso produzirá o seguinte resultado -
Definir a imagem de fundo
Podemos definir a imagem de fundo chamando as imagens armazenadas locais, conforme mostrado abaixo -
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-color: #cccccc;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
<html>Isso produzirá o seguinte resultado -
Repita a imagem de fundo
O exemplo a seguir demonstra como repetir a imagem de plano de fundo se uma imagem for pequena. Você pode usar no-repeat valor para background-repeat propriedade, se você não quer repetir uma imagem, nesta imagem caso será exibido apenas uma vez.
Por padrão , a propriedade background-repeat terá um valor de repetição .
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Isso produzirá o seguinte resultado -
O exemplo a seguir demonstra como repetir a imagem de fundo verticalmente.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Isso produzirá o seguinte resultado -
O exemplo a seguir demonstra como repetir a imagem de fundo horizontalmente.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Isso produzirá o seguinte resultado -
Definir a posição da imagem de fundo
O exemplo a seguir demonstra como definir a posição da imagem de fundo 100 pixels de distância do lado esquerdo.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Isso produzirá o seguinte resultado -
O exemplo a seguir demonstra como definir a posição da imagem de fundo 100 pixels longe do lado esquerdo e 200 pixels abaixo do topo.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px 200px;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>Isso produzirá o seguinte resultado -
Definir o anexo de fundo
O anexo de plano de fundo determina se uma imagem de plano de fundo é fixa ou rola com o resto da página.
O exemplo a seguir demonstra como definir a imagem de plano de fundo fixa.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>Isso produzirá o seguinte resultado -
O exemplo a seguir demonstra como definir a imagem de fundo de rolagem.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-attachment:scroll;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>Isso produzirá o seguinte resultado -
Propriedade abreviada
Você pode usar a propriedade background para definir todas as propriedades do background de uma vez. Por exemplo -
<p style = "background:url(/images/pattern1.gif) repeat fixed;">
This parapgraph has fixed repeated background image.
</p>