Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Color Gradient For Web Page Backgound 2

Status
Not open for further replies.
SpeedMule

SpeedMule

Technical User
Nov 24, 2003
31
US
Does anyone know how to implement effective Color Gradients for Web Page Backgrounds?

I have produced a color gradient in Photoshop and would like to either 1) incorporate this image to be the background of my page or 2) be able to put in the HTML code to achieve this effect.
 
Sort by date Sort by votes
I don't think there's really a good way to have a gradient as your background. You can't do it with plain html/css and using an image is problematic. You'd have to have an image big enough to cover users with higher resolutions. Also, if your page scrolls the background will likely have to repeat, possibly ruining the gradient effect. A vertical gradient would probably be best as you could create a gradient 1px tall and wide enough to cover the highest resolution you want to support. Then just repeat it down the page and it won't matter how long your page is.

Kevin
A+, Network+, MCP
 
Upvote 0 Downvote
Sometimes a gradient background can be nice. You can make it gradient in both directions. All you need is the propper image (horizontal or vertical) sized 1 pixel by (many) pixels, like Kevin said AND some CSS.

You can benefit from using these two CSS properties:

[tt]background-repeat[/tt]

[tt]Value : repeat
Description : Background image is repeated, just as in plain HTML.

Value : repeat-x
Description : Background image is only repeated along the x-axis.

Value : repeat-y
Description : Background image is only repeated along the y-axis.

Value : no-repeat
Description : Background image is only used once.[/tt]

The other one is

[tt]background-attachment[/tt]

[tt]Value : scroll
Description : Background image will scroll with the page, just as in plain HTML.

Value : fixed
Description : Background image will stay put when you scroll.[/tt]

Good Luck §;O)


Jakob


 
Upvote 0 Downvote
What's so hard about making a gradient background?

Let's say you want to go from a dark greenat the top to light green at the bottom and you figure your web page won't be much taller than 1000 pixels (a screen and a half, maybe?).

Use Photoshop in RGB mode to make an image 100 pixels wide by 1000 pixels tall. Use the gradient tool to make your gradient. If you're happy with the gradient, resize the image to 1000 pixels tall by 1 pixel wide, save it as "booger.gif" and declare it in the body of your HTML:

Code: 
<html>
  <head>
  </head>
  <body background=&quot;Booger.gif&quot;>
    <p>whap.</p>
  </body>
</html>

Or did I misunderstand the question?

The CSS is nice, too. I prefer it to declaring this stuff in the HTML.

Cheers,


[monkey] Edward [monkey]

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door
 
Upvote 0 Downvote
Ok, so now that I think about it background gradients aren't as problematic as I first thought. You just have to account for people with higher resolutions.
As an example, let's be nice to people with 1024x768 resolution and have a gradient that goes from red at the top to blue at the bottom. Then we'd create a 1px wide by 750px or so gradient image using your favorite image program. Then make the background image fixed on the web page, align it to the top and tell it to repeat only horizontally. Now the only problem there might be is if a viewer has a bigger resolution than we accounted for. So they'd see the gradient just stop at the bottom and the default background color would continue down the page. The fix of course is to change the background color to be the color of the bottom of the gradient, blue in this case. Using CSS you'd therefore have:
Code: 
body{
  background: blue url(&quot;yourimage.jpg&quot;) repeat-x fixed top;
}

Again, this will look best for people with 1024x768 resolution. For bigger resolutions the gradient will stop midway down the screen and will just be blue the rest of the way. For smaller resolutions you won't see all of the gradient, so it'll go from red at the top to some shade of purple at the bottom of the page.

Kevin
A+, Network+, MCP
 
Upvote 0 Downvote
>>resize the image to 1000 pixels tall by 1 pixel wide, save it as &quot;booger.gif&quot; and declare it in the body of your HTML<<

GIF is not the best format for gradients, you will see banding, not a smooth gradient. For this, use JPG, itis your best bet for a smoth looking gradient.

When in doubt, deny all terms and defnitions.
 
Upvote 0 Downvote
My gradients are normally no larger than 1 pixel wide by 400 pixels high. I put the Page bg as the same color as the &quot;last&quot; color of my gradient. So if anyone has a &quot;higher&quot; resolution than I work with, they will still see a gradient

Ie
Background color of page is White
I go from Dark Grey to White (top to bottom) for my gradient.
 
Upvote 0 Downvote
Wizywyg hit it on the nose thats how i do it as well and just have my background repeat horizontal -- filesizes are less than 5K (and thats large for this) no need for those giant files -- making backgrounds small (filesize wise) is very important -- very rarely do i exceed 5K

<Signature>
Sometimes the Answer You Are LOOKING for can be FOUND BY SEARCHING THE FAQ'S @&%$*#!!!
</Signature>
 
Upvote 0 Downvote
Hey Fellas,

Just came here after seeing a nice background which was a gradient and wanted to work out how the coder had done it.

Really pleased to see that this solution followed the simple background gif of 1 pixel wide by x long mentioned above, rather than muck around with css or script, which is the way it looked at first.

Anyway this coder in question had made the gif 8 x 5000 pixels long!!! that should take care of anyones resolution problems for the next couple of decades. Further more, the size of the gif in question was only shown as 948B, very exceptable.

See ya!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
215
Alt255
Alt255
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
211
lmcate
lmcate
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
744
3esolar
3
MitGandhi
  • Locked
  • Question
WebGL Error
Replies
3
Views
770
spamjim
spamjim
Camila James
  • Locked
  • Question
Shopify vs. WooCommerce – Which Platform To Use For Your Online Store?
Replies
3
Views
173
lucasbrown
lucasbrown

Part and Inventory Search

Sponsor

Back
Top