Using a div with a background image
The question is "Why does my background graphic get cut off?" There are many different ways to solve this solution. The div tag height only goes as far as your content goes. You can solve height issue by adding a height, adding content, or even adding padding to the bottom of the div.
Below are two different examples of how its been done to two different divs.
Example 1 - Secondary column
The div height for this example reflects the secondary column on the right of this page you are on.
Note: The background image height is 210px so the secondary column div height was set to be the same in blue. Since the secondary column doesn't contain any content it will automatically collapse by default.
See an expample of what the secondary column would look like If the height wasn't set at 210px.
|
Example 2 - Primary navigation
The div height for this example reflects the primary navigation on the left of this page you are on.
Note: The background image height is 500px so the primary navigation div has a bottom padding of 250px in blue.
See an expample of what the primary navigation would look like If the bottom padding wasn't set at 250px.
|