CSS Imagem não insere no CSS

Natanael Marrafon Rocha · 20 de março de 2019

Estou fazendo um trabalho do curso e estou tentando inserir uma imagem via CSS só que não esta carregando a imagem o que estou fazendo de errado ? o código é esse :

HTML

<!DOCTYPE HTML>
<html lang="pt-br">
	<head>
		<meta charset="utf-8"/>
		<title>DC COMICS MARVEL</title>
	</head>
	<body>
		<header id="cabecalho">
			<figure>
				<img id="banner" />
			</figure>
		</header>
			
	</body>
</html>

CSS

			* {margin:0; padding:0;}
			
			body {
				background-color:black;
				text-align:center;
				margin:0;
			}
			
			#banner {
				background-image:url(imagens/banner.jpg);
			}

DiF · 20 de março de 2019

@Natanael Marrafon Rocha Olá.

O erro aconteceu porque você tentou inserir uma imagem via CSS em um elemento que não pode receber uma imagem desta forma. O elemento img precisa de uma SRC (source).

Mas a ideia do seu exercício é inserir imagens com CSS, então não no elemento img que vai colocar isso.

Então precisa ser um elemento que possa receber um background. Pode ser <div>, <section>, até mesmo o <figure>

HTML:

<!DOCTYPE HTML>
<html lang="pt-br">
	<head>
		<meta charset="utf-8"/>
		<title>DC COMICS MARVEL</title>
	</head>
	<body>
		<header id="cabecalho">
			<figure>
				
			</figure>
		</header>
			
	</body>
</html>

CSS:

* {margin:0; padding:0;}
			
			body {
				background-color:black;
				text-align:center;
				margin:0;
			}
			
			#cabecalho figure {
				background-image:url(imagens/banner.jpg);
                width: 500px; 
                height: 300px;
                background-repeat: no-repeat;
                background-size: cover;
			}

Repare que foi adicionado mais atributos.

É necessário definir a largura e altura.

Definir se vai repetir ou não e definir o tamanho da imagem, se ela vai ocupar 100% do elemento.

Caso queira que ela ocupe 100% é o cover.

Veja online: https://jsfiddle.net/dife/4fu1jgch/10/

Natanael Marrafon Rocha · 22 de março de 2019

Em 20/03/2019 às 04:07, DiF disse:
@Natanael Marrafon Rocha Olá.

O erro aconteceu porque você tentou inserir uma imagem via CSS em um elemento que não pode receber uma imagem desta forma. O elemento img precisa de uma SRC (source).

Mas a ideia do seu exercício é inserir imagens com CSS, então não no elemento img que vai colocar isso.

Então precisa ser um elemento que possa receber um background. Pode ser <div>, <section>, até mesmo o <figure>

HTML:
<!DOCTYPE HTML>
<html lang="pt-br">
	<head>
		<meta charset="utf-8"/>
		<title>DC COMICS MARVEL</title>
	</head>
	<body>
		<header id="cabecalho">
			<figure>
				
			</figure>
		</header>
			
	</body>
</html>
CSS:
* {margin:0; padding:0;}
			
			body {
				background-color:black;
				text-align:center;
				margin:0;
			}
			
			#banner {
				background-image:url(imagens/banner.jpg);
                width: 500px; 
                height: 300px;
                background-repeat: no-repeat;
                background-size: cover;
			}
Repare que foi adicionado mais atributos.

É necessário definir a largura e altura.

Definir se vai repetir ou não e definir o tamanho da imagem, se ela vai ocupar 100% do elemento.

Caso queira que ela ocupe 100% é o cover.

Veja online: https://jsfiddle.net/dife/4fu1jgch/10/