CODEWITHSUNDEEP
htmlcssbanner
Mahdi
Mahdi

Reputation: 1189

Why is my banner size still big?

I´m trying to reduce total size of the banner: I have reduced the size of the picture to 50%, but still there is a white background that doesn't change. I don't want it, or want to make it the same size as picture cause it's currently too big. Following is my html code:

<section id="banner"></section>

And following CSS:

#banner {
    background-image:url('../images/banner-2.png');
    background-position: center center;
    background-size: 100% 50%;
    background-repeat:no-repeat;
    color: #ffffff;
    padding: 14em 3em 14em;
    text-align: center;}

Following is my fiddle: http://jsfiddle.net/dexoey/vtdscvxk/

And here you can see how that extra white background looks: https://i.sstatic.net/4u2zP.jpg

Upvotes: 0

Views: 344

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

Looks like the padding is what that is causing you the trouble. Try to reduce it:

padding: 10em 3em 10em;

Upvotes: 2

Related Questions