0

Good afternoon all.

Please bear with me if I don't make this easy to understand. Here is my code and a link to an image that I will use to try and explain my issue. The code is as follows: THe HTML

<header>
<div>
    <a href="index.html"><img src="../images/columns.png" alt="columns">`</a>`
    <h2>The Compendium</h2>
    <h3>Of Greek Mythology</h3>
    </div>

The CSS

header {
    position: relative;
    background-image: url(../images/1024px-Raffaello,_concilio_degli_dei_02.jpg)

}
header div{
    background-color: rgba(255,255,255,0.80)
}



header img {
    height: 100px;
    float: left;
    margin-left: 2em;
    margin-bottom: 1em;
    margin-top: 1em

}

header h2 {
    position: relative;
    padding-top: 1em;
    padding-left: 7.5em;
    font-size: 170%
}

header h3 {
    font-size: 120%;
    padding-left: 7.5em;

}

And the image

https://pbs.twimg.com/media/DJiQWAgXkAAqmdP.jpg:large

Basically what I want to do is to have a background image for my header, which you will see in the image. On top of that background image, I want a white transparent background so that the black text can be seen properly. I have the idea of it all, except for one, the column logo. Because I float it, the white transparent background does not extend to the nav bar, as you can see in the image link.

If anyone can think of an alternative way to position the logo so that the text can still be in the same place or at least near to it, I would appreciate it.

Seena James
  • 3
  • 1
PoseidonofSea
  • 5
  • 4
  • I'm not sure I get it. The only thing floating is the img, and it's in the right place on the screen according to the screenshot. So is it the "white transparent" (sic) background that you have problems with? – Mr Lister Sep 13 '17 at 07:02
  • @PoseidonofSea Do you have this website hosted anywhere or can you create a fiddle with your code ? – Shahil M Sep 13 '17 at 07:04
  • I d have the website hosted. the URL for it is: http://christiaanblom.coolpage.biz/The_Hero_%20Compendium.html Its for an assignment, which is why it looks amateurish. I am still learning – PoseidonofSea Sep 13 '17 at 07:23
  • @arthooz Thanks for the link! I got my solution there! Thanks a bunch!!!! – PoseidonofSea Sep 13 '17 at 07:32

1 Answers1

0

Edit : Ok I saw your website now, one solution is to add a <div class="clearfix"> after the h3 element. Then you style this div:

.clearfix{
  clear: both;
}

First answer: If I understand your problem, you just want your white background covering your header. Since your header is position: relative, the code below should work :

header div{
 background-color: rgba(255,255,255,0.80)
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
}

It simply set your white layer to position:absolute and stretch it to cover the container block, which is your header ;)

Socrapop
  • 196
  • 1
  • 9