Ir ao conteúdo
  • Cadastre-se

CSS Imagem não insere no CSS


Posts recomendados

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);
			}

 

Link para o comentário
Compartilhar em outros sites

  • Moderador

@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/

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

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/

Obrigado DIF kkk erro de iniciante

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...