How to fix the white space at the top issue?

[knowledgenotebook]

Hi,

I’m a CSS newbie, my following page has an issue of the white space at the top,

http://www.knowledgenotebook.com/index2.html

How do we fix it?

Thanks.

[Paulie_D]

It’s actually in the background image of the header

http://www.knowledgenotebook.com/images/header.repeat_s3.jpg

[knowledgenotebook]

Thank you, Paulie, would I be able to remove the white space at the top of this image with the Paint program in Windows? Or Paint probably won’t be able to cut it and compromise the image quality?

[Paulie_D]

With Paint?

No…probably not. I don’t think it supports transparency to start with.

You’d need something a little more advanced. I hesitate to say Photoshop as it’s a big ask but there are similar products available for less.

Frankly, the image is so simple that you could eliminate it and do the whole thing with CSS (border-radius and a gradient).

[georgearnall]

If your looking for a relatively better free photo editor for windows use [Paint.NET](http://www.getpaint.net/ “Paint.net”)

[knowledgenotebook]

Paulie, with regard to “do the whole thing with CSS (border-radius and a gradient)”, do you have to think about it for my case or it’s really no brainer for you?

Many thanks.

[Paulie_D]

No thinking…dead easy.

http://codepen.io/Paulie-D/pen/recka

Now you would have to change the colors and perhaps add a color stop and add any required vendor prefixes but those are pretty minor.

[knowledgenotebook]

Ok, Paulie,

Probably for the following:
header {
min-height:150px;
border-radius: 25px 25px 0 0 ;
background:linear-gradient(blue, lightblue);
}

my color is #BCD3FF
how do I apply your “blue, lightblue” to mine?

Thanks.

[Paulie_D]

You have a start colour and an end colour. Just swap those in.

[Paulie_D]

Ok…now remove the bg image from .wrap/

[Rohithzr]

Remove
.wrap {
background: url('../images/header.repeat_s3.jpg') #FFF repeat-x top;
}

this line in .wrap class

[Paulie_D]

No…don’t remove the wrap…remove the background image from the wrap

[Paulie_D]

It’s this image

Just remove it for now.

[Rohithzr]

remove this image and then remove center tag from heading and set left margin for the heading

edit codes in the next comment

[Rohithzr]

remove this

edit heading area with this

Software for Students

Edit : better add the style part in css

[Author]

Posts