Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.

Tutoriais CSS - 3
Como Adicionar uma Imagem de Fundo

A propriedade background-image em CSS é usada para definir uma imagem como fundo de um elemento. Usando esta propriedade CSS, podemos definir uma ou mais de uma imagem de fundo para um elemento.
Por padrão, a imagem é posicionada no canto superior esquerdo de um elemento e repetida tanto horizontal quanto verticalmente. A imagem de fundo deve ser escolhida de acordo com a cor do texto. A má combinação de texto e imagem de fundo pode ser a causa de uma página da web mal projetada e não legível.
O valor url() desta propriedade nos permite incluir um caminho de arquivo para qualquer imagem. Ele mostrará o plano de fundo do elemento. Podemos usar várias imagens ou uma mistura de gradientes e imagens para o fundo. Se a imagem de fundo falhar ao carregar ou se estivermos usando gradientes, mas eles não forem suportados no navegador correspondente, podemos usar o valor de fallback (o valor usado como substituição) como a cor de fundo do elemento.
Sintaxe:
background-image: url();
Valores:
url (): é o URL da imagem. Podemos separar os URLs por vírgulas se quisermos especifi-car mais de uma imagem.
Exemplo:
<!DOCTYPE html> <html> <head> <style> body { background-image: url("coco1.png"); background-color: green; } </style> <script src='/google_analytics_auto.js'></script></head> <body> </body> </html>
Resultado:

Um exemplo utilizando gradiente:
<!DOCTYPE html> <html> <head> <style> body { height: 200px; background-color: #cc00cc; background-image: radial-gradient(red, yellow, blue); } </style> <script src='/google_analytics_auto.js'></script></head> <body> </body> </html>
Resultado:

Um exemplo utilizando imagem e gradiente:
<!DOCTYPE html> <html> <head> <style> body { height: 200px; background-color: #cccccc; background-image: linear-gradient(rgba(0, 0, 200, 0.5),rgba(255, 155, 0, 0.5)), url("tomate.png"); } </style> <script src='/google_analytics_auto.js'></script></head> <body> </body> </html>
Resultado:

*****

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino