Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 193
  • Last Modified:

Repeating bottom part of background image for a page

I have a background image that's a gradient (lighter at the top that transitions to a darker checkered pattern at the bottom) and I want to repeat the darker section of the background image for as long as the page is.  What is the best way to go about this?  Thanks for any help.
0
mike2036
Asked:
mike2036
  • 2
1 Solution
 
Dave BaldwinFixer of ProblemsCommented:
As long as it is a solid color at the bottom, I usually make the background color the same as the part at the bottom.
0
 
Dave BaldwinFixer of ProblemsCommented:
With the checkered pattern you may have to just make a very tall background image.  I think one of my sites has one that is 2500px tall.
0
 
DesignbyonyxCommented:
background: #000 url(/path/to/bg-image.png) repeat-x left top;

Where #000 is the bottom most color of the gradient.
0
 
rbudjCommented:
Since you have a pattern, a solid color is not what you are looking for. Create a container div with 100% width and background set to the full height of the gradient with repeat-x. Then just set the background of the body to the full color pattern.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now