Color the entire header

Question

Color the entire header

Navigation

#1 by (1 votes)
#2 by (-1 votes)

1

I need to change the color of the header of the site, but when I apply the background color in header , the color only takes up the space of the content, thus getting the color of body at the top and bottom like this:

<body><headerclass="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

asked by anonymous 07.03.2018 / 13:28

2 answers

Toggle a select and a datapicker How to sign pdf with digital certificate in PHP + Apache + OpenSSL?

score 1 · Answer 1

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

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

mt actually means margin-top

To read the documentation on Spacing in Bootstrap 4, read the documentation here: link

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

So 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>

score -1 · Answer 2

-1

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

header{
    background-color: #ffff00;
}

08.03.2018 / 21:07