Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Repeating bottom part of background image for a page

Posted on 2011-03-22
4
Medium Priority
?
188 Views
Last Modified: 2012-05-11
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
Comment
Question by:mike2036
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 35194254
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
 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 35194272
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
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 35194391
background: #000 url(/path/to/bg-image.png) repeat-x left top;

Where #000 is the bottom most color of the gradient.
0
 
LVL 16

Expert Comment

by:rbudj
ID: 35194437
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

715 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question