Html CSS tutorial. Create a background for 3 columns with Photoshop & CSS

Home » Websites » Html CSS tutorial. Create a background for 3 columns with Photoshop & CSS

Posted by thierrydehove on Jul 10, 2011 in Websites | 0 comments

I have been working in this business for the past 25 years. Training at the Art School in Paris led me to exceptional experiences in that city (with BDDP, Publicis, Euro RSCG), and later in Bordeaux and the British West Indies (Anguilla).

My job is to create the visual components of various types of media, including magazines, written material and even advertising. In my line of work, a client communicates ideas verbally and I have the rare responsibility of developing a creative way to translate those words into images that combine the relevant information with the emotion that the product wishes to evoke.

I have been using SBI since 2003. I am uploading my own HTML.
Today I would like to share with you how to design your layout for the background with your new 3 columns SBI site (this tip could work also for 2 columns).

Before I found that solution, my background was cut off at the sides. but now, applying the technique I will share with you, the background will be centered and optimized for 17″ inch screen.

I applied it for for my both SBI sites and it works well. Here’s the process…

Html CSS tutorial – Step1:

First you need to build your own design via Photoshop or image software. I am using Photoshop since 25 years and to tell you the truth, it’s the best on the market for images, graphic design, photography and websites.

At the examples below I will use my home page for demonstrating my tip.

The size of my page is 1,400 pixels width but the real size of HTML page is 1,045 pixels. You will see that on my image 01 has vertical blue lines, which mark the width of my HTML page and the rest outside is for my background.

So what I would copy into SBI server will be the file image 02.

Image 01:

Image 02:

Html CSS tutorial – Step2:

I make the edges of my image the same color as my HTML background page and in my case it’s #061729. Than I would need to specify the position on this background in my CSS code .

Here is the CSS code:

body {
padding: 0;
margin: 0;
background: #061729 url(image-files/nameofbackgroundhere.jpg) no-repeat center top;
}

You would need to copy it between 2 < style> tag.

Tag is used to define style information for an HTML document. In the style element you specify how HTML elements should render in a browser. The required type attribute defines the content of the style element. The only possible value is “text/css”. The style element always goes inside the head section.

You can see below my complete CSS code: