Colorize all the header

Asked

Viewed 943 times

1

I need to change the color of header entire site, however when I apply the background color to header, the color occupies only the space of the content, thus leaving the color of the body at the top and down like this:

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

How to put this yellow to cover the whole top?

html css bootstrap

  • @wmsouza n worked

  • Must be some margin that it is defined, perhaps in .topo

  • top n has nothing, use it only for . top img however n has defined margin

  • check if H2 is not on margin, . middle should also be some margin

2 answers

1

Now that I’ve noticed you’re wearing Bootstrap 4, then I’ll rephrase the answer.

Your problem is that you are using the classes mt-4 in the Logo and mt-2 in the div .meio

mt actually means margin-top

For documentation on Bootstrap 4 Spacing read the documentation here: http://getbootstrap.com/docs/4.0/utilities/spacing/

Already the problem of the margin below the <h2> is that by default it has margins above and below. You can read more about these Browsers "CSS Defaults" values in this answer: What is User Agent Stylesheets?* (search for user-agent to learn more)*

Then just remove these classes to solve your problem. See the example below:

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

Whenever you want to apply a color to a generalized tag you can use the tag name within the CSS code as if it were an ID. ex.

header{
    background-color: #ffff00;
}

Browser other questions tagged html css bootstrap

You are not signed in. Login or sign up in order to post.