Patterns for Website Banners¶
Purpose¶
A common request in modern Web sites to have some sort of graphical banner, usually with some text inside. These are most important guide lines for banners. These patterns are specially important for displaying the banner image on different zoom levels or screens and always displaying the main content.
Assumptions¶
- The banner image is added as
background-image
property. Not<img>
tag. - The design is flexible or responsive.
Banner Images¶
There are 3 important guide lines regarding image specifications: 1. Image Size 2. Image Aspect Ratio 3. Image CSS properties
1. Image Size¶
acceptable by client. | Usually 1600 px or 1900 px are enough.
We will use background-size: cover
property to always make sure that
the image width is 100% of the screen.
2. Image Aspect Ratio¶
Aspect ration affects image height. You should calculate the aspect ration for image main content to be visible.
For Example: Image size is 1600 x 900 px. So the aspect ratio is 16:9 which is excellent for hight definition images.
and height <div>
with the banner as background image.
| To determine the height of the viewport, you can calculate it based
on the viewport width.
Height Calculation¶
px
for height unit.lower zoom level, 1 screen pixel matches more than 1 css pixel. For example: (50% Zoom level, 1 screen pixel = 2 css pixel) | On heigher zoom level, 1 css pixel matches more than 1 screen pixel. For example: (200% Zoom level, 2 screen pixel = 1 css pixel)
Height Alternative¶
Instead of using height
css property, we will use padding
on
parent viewport! padding
property when given value in percentage
%
, it’s calculated as percentage of the parent container!!
(Interseting CSS Feature) To calculate the required padding, use the
following equation:
Padding (Top OR Bottom) = 100% x (aspect/ratio)^-1
Example: * Aspect Ratio = 16:9 => padding-bottom = 100% * 9/16 = 56.25% * Aspect Ratio = 4:3 => padding-bottom = 100% * 3/4 = 75%
3. Image CSS properties¶
Image is used as background-image
property. Image is centered and
stretched.
<div class="viewport>
<div class="banner-img"></div>
</div>
.viewport {
position: relative;
padding-bottom: 56.25%; /* (100% x 9/16) */
height: 0; /* Only height
}
.banner-img {
position: absolute;
left: 0;
right: 0;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-color: transparent;
background-size: cover;
/* Dont't forget background-image! */
}
Example¶
- See BannerPatterns.html in project files.
Special Cases¶
- Notice if you need to include text inside the banner image, it will change in size as you zoom in and out. And it might overflow the viewport.
- If you have scallable content above the viewport, the viewport will move up and down as you zoom in and out.
- For really small screens, you can move the content inside the banner image outside. (For example, remove the position absolute for inside content)