Banner Size Continues to Remain Large Despite Efforts

The direct publishing publishers have specified that the entire banner, comprising compressed files, should not exceed 100kb. However, the font itself takes up to 400kb.


Question:

In an attempt to decrease the overall size of the banner, I have already reduced the picture size to 50%. However, despite this, there is still a white background that remains unchanged. I neither desire to keep it nor want to make it the same size as the picture, as it is currently too large. Here is the HTML code that I have utilized.


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;}

Here’s a fiddle I created, accessible through this link: http://jsfiddle.net/dexoey/vtdscvxk/

Check out the image at http://imgur.com/nnvbri3 to see the appearance of the additional white background.



Solution:

It appears that the issue stems from

padding

. To resolve the problem, attempt to decrease its usage.

padding: 10em 3em 10em;

Frequently Asked Questions

Posted in Css