Tag Archives: css

Some new things

In case you haven’t noticed, I’ve completely redone this website. I changed the layout and page structure. The front page is now a highlight of my programming career, displaying various projects I’ve worked on and jobs I’ve had. Sort of like an online resume. I hope this new format is well received.

In the meantime I’ve been working on a new project, an Android game. I hope to post more information on it soon. It’s almost finished, but still has some key features to implement.

Posted in Updates | Tagged , , , | Leave a comment | 88,702 views

Using a gradient background on a website that fades out

It took me a while to figure out how to get a gradient background to look exactly like I wanted. While the simplest solution is to use a repeated background to create a gradient effect, I wanted it to fade out at the bottom. If you look at this site www.sunflowermaids.com, there is only a gradient at the top of the page. As the page gets longer like, the background is a constant colour. Somehow I needed to have two different backgrounds, both working at the same time. It took a lot of digging but I finally found a solution.

Here is the code that is necessary to get it to work. Visit http://checklistmaids.com/. First, create a thin image that will be your gradient. Mine is located here.

The css code to use this as a repeated background is:

body {
background: url('gradient.jpg') repeat-x;

To then get the ‘second’ background image, which is shown when the page gets really tall, I use this image. The css code is:

html {
background: url('bg.jpg');

Hopefully this can be useful to some people.

Posted in Programming | Tagged , , | Leave a comment | 3,863 views