HTML Objetivo: Fundo "head=uma cor";"body=uma imagem"

Joel Martins · 10 de abril de 2021

Objetivo:head-background-color=white // body-background=image

Alguem me conseguem ajudar?

<head style="background-color:powderblue;">
(...)
 </head>
(...)
<body background="bambu.png" alt="Bambu_background_">
(...)
</body>

Muito obrigado:)

WilliamNascimento · 10 de abril de 2021

Acho quer nao e possivel por background no head , creio eu . Porque um background no head ?

Joel Martins · 10 de abril de 2021

@WilliamNascimento Queria que ficasse +- assim:

Marcelo Calazans · 10 de abril de 2021

@Joel Martins

Olá colega.

Há duas tags que você pode trabalhar para adicionar fundo; o <html> e o <body>, mas para isso você vai ter que usar o CSS.

Abaixo tem um exemplo na cor vermelha:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>

<body>

<style>
    body { background-color: red; }    
</style>

</body>
</html>

<body> e <html> são em essência diferentes, mas neste caso para o fundo, daria na mesma usar tanto um como o outro. Veja abaixo um exemplo com a tag <html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>

<body>

<style>    
    html { background-color: blue; }
</style>

</body>
</html>

Para adicionar imagens de fundo, você pode fazer como está abaixo:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>

<body>

<style>    
    body { background-image: url("fashion-6146328_1920.jpg"); }
</style>

</body>
</html>

Dar uma estudada no CSS vai ajuda-lo na tarefa.

Abraços.

26 minutos atrás, Joel Martins disse:

@WilliamNascimento Queria que ficasse +- assim:

Neste caso ficaria assim:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>

<body>

<style>
body {
   margin: 0;
   padding: 0;
   background-color: rgba(111,111,111,1.00);
}

header {
   background-color: rgba(255,0,0,1.00);
   width: 100%;
   height: 100px;
}
</style>

<header>MEU SITE</header>

</body>
</html>

Abraços.

Joel Martins · 11 de abril de 2021

@Marcelo Calazans Mas o que o senhor escreveu ali acaba por não funcionar. Pois o meu objetivo era fazer isto:E o que o senhor me deu faz com que a head fique com a mesma imagem que o body

Marcelo Calazans · 11 de abril de 2021

@Joel Martins

A primeira coisa que eu vou te sugerir, é que estude a estrutura do HTML.

Pelo que posso ver em seus comentários, você está pensando errado sobre a tag <head>.

Você não pode colocar cor ou imagem na tag <head>, veja a seguir o que é a tag <head> https://www.w3schools.com/tags/tag_head.asp

Com a estrutura que eu montei, usando a tag <header>, é possível sim fazer o que você quer, basta você fazer alterações no CSS que eu propus no código acima. Mas para saber o que alterar e como se comportam as alterações, você precisa se aprofundar um pouco no CSS.

CSS e HTML andam juntos, na criação de websites não há como separa-los, e a pessoa nunca vai ter o comportamento esperado do HTML, se não usar junto com ele de forma eficiente o CSS.

Veja o exemplo abaixo, ele é basicamente a mesma coisa que eu havia feito antes, com algumas alterações no CSS:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>

<body>

<!-- ESTE É O INÌCO DO CSS -->
<style>
body {
   margin: 0;
   padding: 0;
   background-image: url(https://ik.imagekit.io/vu1pwgp5n/fashion-6146328_1920_gQH9Z003_.jpg);
}
.cabecalho {
   width: 100%;
   height: 100px;
   background-color: rgba(255,255,255,0.60);
   position: relative;
}
h1 {
   position: absolute;
   top: 50%;
   left: 50%;
   -moz-transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   font-size: 40px;
   margin: 0;
   padding: 0;
}
</style>
<!-- ESTE É O FIM DO CSS -->

<div class="cabecalho">
     <h1>MEU SITE</h1>
</div>

</body>
</html>

Perceba que o CSS é muito importante para você fazer as coisas que você quer.

Abraços colega, e boa sorte nos estudos.

Joel Martins · 11 de abril de 2021

@Marcelo Calazans Muito obrigado pela sua paciência e ajuda.Eu ainda não tinha percebido isto:

4 minutos atrás, Marcelo Calazans disse:

CSS e HTML andam juntos, na criação de websites não há como separa-los, e a pessoa nunca vai ter o comportamento esperado do HTML, se não usar junto com ele de forma eficiente o CSS.

Se quiser pode ir vendo como está evoluindo e dar a sua opinião á cerca do meu "website". MUITO obrigado:)

Meu website-->https://p4ndast0re.000webhostapp.com/

Marcelo Calazans · 11 de abril de 2021

agora, Joel Martins disse:

@Marcelo Calazans Muito obrigado pela sua paciência e ajuda.Eu ainda não tinha percebido isto:

Se quiser pode ir vendo como está evoluindo e dar a sua opinião á cerca do meu "website". MUITO obrigado:)

Meu website-->https://p4ndast0re.000webhostapp.com/

Legal amigo, está ficando muito bom.

Continue assim e fico feliz em ajudar.