Unwanted White Rows Covering Background Image [Solved]

Hello,

I was developing a basic web page using HTML and CSS when I encountered this issue. I see that a white row is being displayed where there is a

element.

Ideally I wanted it to be transparent so that the text is visible above the background image.

However even after experimenting for some 3-4 hours (such as using opacity of 0.0 in rbga etc. ), I’m unable to remove this white background.

I feel that I’m overlooking something very basic, yet failing to identify the error.

Can you please help me in resolving this issue?

Codepen URL: http://codepen.io/abbor123/pen/EgjLdR

I changed the html in the CSS with body.

1 Like

I’m sorry, but did you say that you modified the code in the codepen? Because I’m finding it hard to find any modification. Also the the white band at the top which covers the background image still persists.

Please forgive me if I’m misunderstanding you.

I did, but my changes are only local. Anyone can play around with your code in codepen, but only you can make permanent changes.

Oh! I didn’t knew that. I’m new to this environment. :slight_smile:

Well, that worked. Thanks. But I didn’t understand why html tag didn’t work.

I found somewhere that the html tag also depicts the complete page. Also I didn’t understand the reason for the white backgrounds.

Nevertheless, I was at least correct one way - It really was a very subtle, yet significant, mistake. :wink:

I don’t understand too. I never used html as a selector in CSS.