I would like to create a background image that starts as a gradient at the top and fades to a solid color. This way text can appear in the foreground.
It would be nice if I could specify a starting/ending color, including how much space the ending color should occupy in the image.
If anyone can point me in the right direction, I would appreciate it.
How do you want to create the gradiant?
Anyway all you need to do is find a software program that will create a gradiant ( most will ); if it is a website background the gradiant only needs to be a few pixels wide as you can repeat it across the page and the height wants to be about the height of the page.
You can change how long the gradiant is by adding a full colour section at the top or the bottom of the gradiant with the relavent colour to complete the size.
Use this tool: http://www.colorzilla.com/gradient-editor/
You'll create a <div></div> and include your text <p></p> inside it. For instance, put this (from the link above) on a page and save it as example.html on your desktop, then double-click on it to view it in a browser:
<div style="padding:100px 0; width:100%;background: #f2f6f8; /* Old browsers */
background: -moz-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f6f8), color-stop(50%,#d8e1e7), color-stop(51%,#b5c6d0), color-stop(100%,#e0eff9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); /* IE10+ */
background: linear-gradient(to bottom, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9',GradientType=0 ); /* IE6-9 */
<p style="text-align:center; font-size:2em;">This is text inside the div containing a gradient background.
<br>I added generous margins top and bottom so the gradient goes above and below this sentence.
<br>You won't need to create a graphic if you use CSS gradients!
<br>I hope this example helps you.
This topic is now closed. New replies are no longer allowed.