HTML and CSS Reference
In-Depth Information
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.
