Jump to content
Sign in to follow this  
Blake

Backgrounds

Recommended Posts

Hello, I wasn't sure if I should post this under CSS, HTML, or whatever so I ended up in the general topics. I am relatively new to we development. I had page that the back ground is an image of a color to goes light at the top to a darker shade at the bottom (gradient). So normally to save load time I assume you would just apply the color via CSS so it doesn't have to load and actually image. Is it possible to use some sort of HTML, CSS, etc to apply a gradient to the solid color? Or do i just have to load the image. I hope this makes sense. I appreciate the help. Thanks

  • Like 3

Share this post


Link to post
Share on other sites

CSS3 allows for gradients, however, it might not be well supported among all browsers because the standard is still really new. For full compatibility across all browsers, use an image. If the image is 1px wide you can just repeat it horizontally and it doesn't take long to load such a small file.

Share this post


Link to post
Share on other sites

There is an excellent gradient generator here which will generate all the code you'll need. It even generates the IE-specific filter code and both syntaxes for Chrome. This will cover pretty much every browser commonly used, including IE 6, 7, and 8. Other browser vendors, like FireFox and Webkit (Safari and Chrome), have supported gradients since fairly early on so they shouldn't be much of an issue. The generator also generates a flat color fallback for browsers that don't support gradients. However, if you absolutely must have the gradient in every browser, you'll have to use an image, like Ingolme mentioned.

Share this post


Link to post
Share on other sites

Amazing. I really appreciate the feedback! Thank you for the gradient generator, that will be really useful! Just a quick question. If I were to us an image that is 1px wide and repeat, I wouldn't be able to get the gradient effect, right? that may be an obvious question, but I just wanted to make sure I understand.

Share this post


Link to post
Share on other sites

A gradient image would be 1 pixel wide, but it's much taller. It could be 100 or 200 pixels tall. If you repeat that image horizontally it would cover all the horizontal space of the element and the element would have a gradient in the background.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...