CODEWITHSUNDEEP
htmlcss
user6123190
user6123190

Reputation:

My header has a transparent background(?) even though I have declared a background-color, how do I fix this?

I'm practicing my HTML/CSS by creating a mock portfolio site and as the title states, my header element seems to have a transparent background when I need it to be a solid color. You can see the transparency in action when you scroll down the page, moving the header over the TEST! paragraph.

JSFiddle: https://jsfiddle.net/ff557x6k/

(below is a Dropbox file containing my CSS)

CSS: https://www.dropbox.com/s/5610p9a5vkjyrcy/main.css?dl=0

(Also, if you are skimming through my code and have the time I'd love to know if there is anything I could do better, if there is something I am doing incorrectly, or perhaps if there is somewhere I could instill better coding practices.)

Upvotes: 0

Views: 3096

Answers (5)

awkwardBellsprout
awkwardBellsprout

Reputation: 11

It's not transparent. The header just has a lower z-index value than the text you're scrolling over it, which gives the header the appearance of being transparent.

Give the header a z-index value of 9001 to solve this issue.

Upvotes: 1

Sivan_G
Sivan_G

Reputation: 43

To manage your website better i recommend you not to put the pictures that you want on your desktop and create a link that's is vary long and not useful if will want to put the website on the internet.

create a folder on your computer that will be your main folder will call it "myProtfolio" inside the folder you put a folder of images, css, javascript and so on the html page can be without a folder. you can see in the picture below how it will look like.

enter image description here

when your puting src image you can write someting like 

<img src="../images/the_name_of_the_pic.jpg"/>

and not the long link you have written. you will have your files organized and easy to orientate.

anther thing you need to organize your css by sections like (header,footer,nav) and all of the css styling that goes with that including fonts and colors.

also if you have the same css styling to multiple html elements like font instead of giving the same font family to a lot of elements you can give the body element the font family you want and the other elements will inherit the same font family.

you can read more on Inheritance in the link

Upvotes: 0

Shadow
Shadow

Reputation: 244

Actually man you are feeling like that's as transparent. But really it isn't. its a grey color. so you just replace your color code with black if you want black header.

Upvotes: 1

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10187

there were no background declared

#header {
    width: 100%;
    position: fixed;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 30px;
  background:#ccc;
    border-bottom: 2px solid black;
}

in the above code i have given background and its working fine check this fiddle

https://jsfiddle.net/yudi/ff557x6k/2/

Upvotes: 1

Sonny Prince
Sonny Prince

Reputation: 1152

you should just set a background on the #header.. Like so:

https://jsfiddle.net/ff557x6k/1/

Upvotes: 0

Related Questions