HTML and CSS Reference
The first option is to crop the background directly,
just like you did with top.png .
If the requirement is to have the highest level of
multi-browser compatibility, cropping is the solution
(e.g. gradient is shown on all supported browsers ).
Let's have a glimpse at this example where the
height of the header remains unchanged ( fixed ).
The previous crop you did was the top background,
trimmed to its minimum functional size.
You can apply the same approach here and save a
header.png file, but you'll basically have two files then:
top.png and header.png .
If the top bar and the header stays fixed in height,
have those images combined to save on the page size
and reduce the number of resources to download.