1

Preciso alterar a cor do header inteiro do site, porem quando aplico o background color no header, a cor ocupa apenas o espaço do conteúdo, ficando assim a cor do body no topo e em baixo assim:

inserir a descrição da imagem aqui

<body>
    <header class="container-fluid topo">
        <img src="img/selo.png" class="img-fluid mx-auto float-right selo">
        <img src="img/logo.png" class="img-fluid mx-auto d-block mt-4" alt="Logo DoUp">
        <h2 class="text-center text-dark ">Seu curso de espanhol em 12 meses</h2>
    </header>
<div class="meio mt-2">

Css:

header{
    background-color: #ffc107;
}

Como colocar este amarelo para cobrir toda a parte superior?

4
  • @wmsouza n funcionou Commented 7/03/2018 às 12:32
  • Deve ser alguma margin que esta definida, talvez em .topo
    – NoobSaibot
    Commented 7/03/2018 às 12:35
  • em topo n tem nada, uso ele só para .topo img porem mesmo assim n tem margem definidas Commented 7/03/2018 às 12:49
  • veja se h2 não está com margem, .meio também deve ser alguma margem Commented 7/03/2018 às 12:53

2 Respostas 2

1

Agora que reparei que vc está usando Bootstrap 4, então vou reformular a resposta.

Seu problema é que vc está usando as classes mt-4 no Logo e mt-2 na div .meio

mt na verdade significa margin-top

Para ler a documentação sobre o Espaçamento no Bootstrap 4 leia a documentação aqui: http://getbootstrap.com/docs/4.0/utilities/spacing/

Já o problema da margem abaixo do <h2> é que por default ele tem margens acima e abaixo. Vc pode ler mais sobre esses valores de "CSS Defaults" dos Browsers nessa resposta: O que é User Agent StyleSheets?* (pesquise sobre user-agent para aprender mais)*

Então basta remover essas classes para resolver seu problema. Veja no exemplo abaixo:

header{
    background-color: #ffc107;
}
h2{
    margin-bottom: 0 !important;
}
.meio{
    background-color: brown;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />

<header class="container-fluid topo">
    <img src="img/selo.png" class="img-fluid mx-auto float-right selo">
    <img src="img/logo.png" class="img-fluid mx-auto d-block" alt="Logo DoUp">
    <h2 class="text-center text-dark ">Seu curso de espanhol em 12 meses</h2>
</header>

<div class="meio ">gdfgfd</div>

-1

Sempre que quiser aplicar uma cor a uma tag de forma generalizada você pode utilizar o nome da mesma dentro do código CSS como se fosse uma ID. ex.

header{
    background-color: #ffff00;
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .