Welcome To My Website

A Retired Academic, I Use Linux

Welcome to My Website!!

Trials and Tribulations of Designing my Website

Here is how

The background, was designed with GIMP.The header was a phtograph taken by my son-in-law Amit. The web site was designed with HTML5, CSS3 and PHP, with a lot of help from a book on PHP by Jono Bacon and several websites. I am using Ubuntu Natty Narwhal Desktop./p>

Creating background with GIMP

If you use windows as your desktop, and have access to Photoshop, you can design your webpage background using that I use Linux, therefore I use GIMP.

In Ubuntu, Application--Graphics--Gimp image editor.

In the image editor, click File--New. In the resulting 'Create a new image window, Template' choose whatever size you want. I used a width of 1400 pixel and height of 2000pixels.

From the tool palette on the left, select the foreground colour(see screenshot) Pick a colour. Do the same with a background colour.


Click on the blend tool and drag from top to bottom of the canvas diagonaly. Click on filters, then decor and add bevel. Choose thickness.

I played around with all the various options on the toolbar to get what I wanted for the background image. Gimp may not be photoshop but I find it cool. You can use GIMP to create header, logo and title for the website. Although I managed to get a lovely background to my web pages, the pages did not render well with different screen resolutions. So I decided to exploit the CSS3 based solution for creating a background with gradient.

Update on background design

Having created the background with GIMP, I started to learn and experiment with CSS3.The CSS code below shows how the background gradient was created.

body { line-height: 1; background-color: #000066; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000066), to(#33FFFF), color-stop(.6,#E3B88F)); background-image: -moz-linear-gradient(19% 75% 90deg, #33FFFF, #E3B88F, #000066 100%); font-family: Verdana, Arial, Helvetica, sans-serif; color: #0000FF; font-size: 14px; line-height: 18px; } Similar code in the wrapper div resulted in the web page with gradient. A border of 5 pixels demarketed the boundary between background and web page.