Solved

Left to right fade background

Posted on 2006-11-18
11
329 Views
Last Modified: 2010-04-09
I have a client who wants there web page to have a fade on it, starting from white on the left side, to a grey on the right side. I dont want it to be animated, I dont want to use an image, and it needs to resize with the web page.

Ive searched google and cant even get a close answer to help me.

Any ideas?

Tony Cross
0
Comment
Question by:tonelm54
[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
  • 4
  • 2
  • 2
  • +3
11 Comments
 
LVL 28

Expert Comment

by:TName
ID: 17972733
Why don't you want an image? A very very narrow long image, vertically repeated as the body's background?
0
 
LVL 5

Expert Comment

by:basiclife
ID: 17972738
As far as i am aware, there is no way to do this. The only thing that evens seems remotely possible would be to have a series of <DIV>s z-ordered behind the main body of the page, each with aa slightly altered background color.

This would not be smooth (unless you had hundreds of DIVs = a couple of hunrder extra kilobytes of HTML per page) so I wouldn't reccomend it.

The best option _would_ be to use an image as far as I know. Can i ask why you're avoiding that option? The image size can be tiny so shouldn't impact much.

You could have a small script to generate the file based on the browser window width. so it's always white on the R.H.S. Please note: I don't think this is an "elegant" solution, but a possible work-around. Especially as you'd probably have to start with a standard-width image and switch to your custom-width one with javascript once you know the browser's viewing area.

Sorry I couldn't offer anything more helpful. Maybe one of the other experts can tell you more...
0
 
LVL 28

Expert Comment

by:gamebits
ID: 17973498
Like TName and basiclife I would recommend the use of a background image, you can create a gradient here

http://www.grsites.com/exec/public/texturegradient.cgi?action=select

Gamebits
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 10

Expert Comment

by:js_vaughan
ID: 17973903
I agree an image with a 1px height is the best way to go as it will work with all browsers.  The only other route is to use some CSS that will only be correctly rendered in Internet Explorer.  Users with firefox, opera, netscape, safari, etc will only see a white background.  While I can't in good mind recommend this as the "best" solution, here is how to do it:

<style type="text/css">
<!--
body {
    margin:0px;
      padding:10px;
      height:100%;
    filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#99CCFF', startColorstr='#ffffff', gradientType='1');
}
-->
</style>
0
 
LVL 10

Expert Comment

by:js_vaughan
ID: 17973906
Sorry, that fades to blue.  Just edit 99CCFF to whatever shade of grey you want.  "bbbbbb" for example.
0
 
LVL 5

Expert Comment

by:basiclife
ID: 17974043
Another idea  a combination of methods. As js_vaughan said, go the CSS and image route however...

http://www.htmlite.com/faq022.php

demonstrates how to STRETCH not tile the image

This means you'll always have it the right width. If you make the original image 1280 pixels wide, it'll even degrade pretty nicely in browsers that don't use CSS (not many now). Final output looks something like this:

<html>
<head>
<title>How to stretch a background image.</title>
<style type="text/css">
body {margin:0px;}
#bg_image {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0;
}
#contents {
z-index: 1;
position: absolute;
}
</style>
</head>

<body>

<!-- this creates the background image -->
<div id="bg_image">
<img src="images/scenery.jpg" style="width: 100%; height: 100%;">
</div>

<!-- this puts the contents of the page ontop of the background image -->
<div id="contents">
This is a test.
</div>

</body>

</html>

Another slightly different solution is here: http://Q_20526046.html
0
 
LVL 19

Accepted Solution

by:
DreamMaster earned 500 total points
ID: 17979074
Not much more to add, just one thing maybe...

Yes, go for the image background, it's the only solid way to do this, and to make sure your fade always ends nicely, use the background-color to set the rest of the page to the sidemost color so that you can use the image without repeating horizontal.

Regards,
Max.
0
 

Author Comment

by:tonelm54
ID: 17989890
After spending several hours thinking of a solution, I have to agree with DreamMaster, that this would be the best and simplist idea, Thanks for everyones help though!

Tony
0
 
LVL 5

Expert Comment

by:basiclife
ID: 17990004
I just have to point out that every single person here has suggested using an image and everyone did it before Dreammaster. Is there any particular reason you picked his answer instead of a split?
0
 
LVL 19

Expert Comment

by:DreamMaster
ID: 17996410
Maybe because I added the little part about using the same color as the end of your image...so you will never see a part where your background stops...other than that I agree, I said it all after you guys..

Regards,
Max.
0
 
LVL 5

Expert Comment

by:basiclife
ID: 17997240
True. Please don't think that was a dig at you - it wasn't! I just wondered why he picked one over the rest
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

Suggested Solutions

Title # Comments Views Activity
document.write() deleting all existing HTML 5 68
Help with mod_substitute 18 35
Selected in an option list 13 26
Table style position to the left 8 24
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

735 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