Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
27th December 2009

Design floating pages using large fixed background images

BACKGROUND IMAGES ARE A STAPLE DIET OF WEBPAGES

Design floating pages using large fixed background images
BACKGROUND IMAGES ARE A STAPLE DIET OF WEBPAGES. HERE WE ADD THE FIXED ATTRIBUTE TO CREATE THE ILLUSION OF FLOATING PAGE CONTENT

BACKGROUND IMAGES ARE an integral element of the web design process. They provide a one-step process to creating immediate and beautiful graphics. Typically, they are used as repeating backgrounds to compensate for screen resolutions, header and background graphics in blogs and the basis for buttons, tabs and boxes. This tutorial is going to go beyond standard practice and demonstrate how to use a single large background image and add the fixed attribute to keep it static. The background image is placed within the body tag which means that any div tags will effectively float above the background. When the scrollbar is called into action the content of the page scrolls up and down as normal but the background image remains in place. Finally, with the creative use of anchors and section headers, users get to jump to the desired section with the logo always on display.

Author: Steven Jenkins | Originally appeared in Issue159

01 Killer background image
Design floating pages using large fixed background images
For the style of page to be created in this tutorial the background image is effectively the key component. The background image will go on to determine, to a certain extent, the layout and colour scheme of the rest of the page. When looking for an image try to find something striking, relevant and not too over complicated. Busy images work well in specific situations but often only distract from the content on the page. Another consideration is the size and resolution of the background images. First the image needs to be 72 dpi, the web standard. If purchasing an image make sure to check the dpi. Secondly, the size is very important. Screen resolutions are a major consideration, so there is no point in using an image that is less than 800 pixels wide. This would lead to a lot of a one-colour background on show or an unwanted repeating background. The ideal choice is to get an image that is at least 2,000 pixels to compensate for all backgrounds. Alternatively, create a gradient blend on the edges of the background image using a colour that will match the chosen background. The background image used in the tutorial can be found at http://www.istockphoto. com/stock-photo-4017930-milk-in-fridge.php.

02 Create and place title
The original dimensions of the background image used in this tutorial were 3,446×2,267 pixels at 300 dpi giving a whopping file size of 4.85MB. Using Photoshop we saved the image as 72 dpi and trimmed down the image dimensions to 1,900 pixels wide and 1,009 pixels high. This was to get rid of areas of the image we didn’t want to include. For example the top of the image had too much detail so we cropped this out. With the dimensions of the image in place the next step is to incorporate the title and tagline of the website into the background image. In our example we choose to line up the top of the title with the top of the milk carton and to the left. The title itself was placed to give space to the left and above and give us an approximate working area of 1,000 pixels. The milk carton was to be used almost like a sidebar and give the page a static focal point. Finally, the title was styled up and some accompanying graphics were put in place to create the logo. The background image is now ready to be placed into a page.

03 Fix it
Design floating pages using large fixed background images

Once all the elements of the background image have been created the next step is to incorporate it into the page. Create a new file and save ready to populate. Now head to the Text menu and select CSS Styles>New to open the CSS Rule window. Now select the Tag Selector Type, choose body from the Tag drop-down list, Define in (New Style Sheet File) and press OK. Now give the style sheet a name and press Save to open the CSS Rule Definition window. Select Background, click Browse and locate the background image created previously and press OK. Ideally, this should be in a folder called images under the root folder. Next it is time to create the fixed background image. This is achieved by simply selecting fixed from the Attachment drop-down list. Now switch to the Box category and in the Top text box under Margin add a zero. This will set all the margins to zero. Now press OK to complete.

04 Create wrapper
Design floating pages using large fixed background images
With the background image in place it is time to start adding the div tags to create the layout. First, a tag is going to be added to contain all the content and give a framework to work within. Go to Insert>Layout Objects>Div Tag to open the Insert Div Tag window. Now click New CSS Style, select the Advanced Selector Type, give the tag a name (preceded by the hash symbol), ie #wrapper, Define in the style sheet created previously and press OK to open the CSS Rule Definition window. Now select the Box category and add the following: Width: 1,200 pixels, Height: auto, Left under Margin to 330 pixels and Right to auto and press Apply and OK and OK again. The left margin is set to 330 pixels to ensure the content will line up with the background image used in the tutorial. This, along with many of the other measurements used throughout this tutorial, are open to interpretation depending on the background image used. Now save the appropriate file, this will be the HTML or CSS file depending on the additions/changes made.

05 Page header
Before adding further div tags, add a comment next to the closing #wrapper div tag. Place the cursor immediately after the closing </div> tag and go to the Insert menu, select Comment and add something like closing #wrapper tag. This should be applied across all div tags in the code, making it easier to find specific closing div tags when necessary. Now delete the text, Content for id “wrapper” Goes Here, within the #wrapper div tags, place the cursor between the opening and closing tags and create a new div tag called #header. Make the tag 100 pixels high, 1,185 pixels wide with a 15 pixel padding top and left. Now select the Border category and uncheck all checkboxes. Now select dashed from Bottom, make the width 1 and the colour white. Remember to comment the closing div tag and indent the code. It should look something like this:

<div id=”wrapper”>
<div id=”header”></div><!–closing #header tag –>
</div><!–closing #wrapper tag –>

06 Columns container
Design floating pages using large fixed background images

In Split (or Code) view place the cursor after the header comment and hit three returns to create space for the new code. Now head to the Insert menu and create a new div tag called #columns. Select the Box category and make the width 875px and set the height to auto. This will allow the tag to expand as new content is added. The top margin is set to 225 pixels to position it exactly in the desired position. Switch to Border and add a 1- pixel dashed white border to the top of the div tag. Now save the page and preview in browser (File>Preview in Browser) or via the F12 shortcut. This will frame the logo on the background image, giving it more impact.

07 Left and right columns

Design floating pages using large fixed background images

Delete the default text within #column tags, place the cursor between the tags and add three returns to create space for the new div tags. Now create a new div tag called #leftcol. Select the Box category and set the width to 375px, set the height to 470 and set the float to left. To create space we have added a 20px top margin to move the tag away from the previous tag and added 10px padding to all but the top. Finally, the background colour has been set to white. To accompany the #leftcol a #rightcol is going to be created. This will boast the same attributes as the leftcol but float to the right. To create the right column, we are going to copy the code for #leftcol tag. Select all the #leftcol code including the comment and copy (Ctrl/Cmd+C) and paste (Ctrl/Cmd+V) on the line underneath. Now change the code:

<div id=”leftcol”>Content for id “leftcol” Goes Here</div><!–closing #leftcol tag –> to the following: <div id=”rightcol”>Content for id “rightcol” Goes Here</div><!–closing #rightcol tag –>

Now switch to the accompanying CSS file and copy all the code for the #leftcol tag. Paste directly underneath and change the name to #rightcol and float: from left to right and save.

08 Quick code creation
There is now effectively a set of right and left columns which are ready to be populated. To create uniformity throughout the page, the code for both tags is going to be copied and pasted as many times as needed. Copy all the code for both tags, again including comments. Now create a space for the new code, after the rightcol comment, and paste in the code, repeat until complete. Now save the page and Preview in Browser to see it in action.

09 Section headers
Design floating pages using large fixed background images

Now it is time to split up the sets of left and right columns with a section header. The purpose of the section header is that it will allow the logo (on the background image) to been seen when each section is viewed. First, place the cursor after the first rightcol code and create space for the code. Now head to the Insert menu and create a new div tag called #section. Set the height to 280 pixels, the width to 875 pixels, float: left and add a top margin of 25 pixels. Now select the Border category and set the top border as a solid four-pixel white border. Now set the bottom border as a dashed 1- pixel white border. Now switch to Background where we are going to add a small graphic to accompany the title that is to go in the section header. Press Browse, select the image and press OK. Now set Repeat to no-repeat, Horizontal position to right and Vertical position to top. This will place a single instance of the image in the top-right corner of the tag. Now copy and paste the code after every instance of #rightcol except the last one and save the page.

10 Add a footer
Design floating pages using large fixed background images

To finish off the page a footer needs to be added. Place the cursor immediately after the closing comment for the #columns tag and hit three returns. Now go to the Insert menu and create a new div tag called #footer. Set the height to 100px, the width to 865 pixels and float to the left. To finish up the #footer tag add a dashed 1-pixel white border. Padding and margins will be added at a later date.

11 Header tags
Design floating pages using large fixed background images

With the layout tags in place it is time to start adding content. The first content to be placed on the page are the navigation links across the top. Add the text between the #header tag. To style the text go to Text>CSS Styles>New, select Tag, h1 from the Tag dropdown list and press OK. Now select the font, size and colour and change the line-height to 0. We have used Verdana at 40 pixels with a light blue colour (#BED2EA) and set the weight to lighter. To position the link text add 15 pixel padding to the top of the tag. Now place the opening and closing h1 tags, <h1></h1>, either side of the text. This styled text is going to be links so we are going to create a link style which will determine the colour and the link style. Switch to the CSS file and add the following:

h1 a { color: #FFFFFF; text-decoration: none;} This will make the link white and remove the underline. Now add the following code directly underneath: h1 a:hover { color: #FFFFFF; background-color: #BED2EA;}

This will change the link so that it has a coloured background when the mouse cursor is placed on the link.

12 Create content
Design floating pages using large fixed background images

The next stage is to add the necessary content for each of the columns created previously. Each column is to contain a title, an image and the relevant text. The title will include a new class and h3 tag to style, the images will be set to a uniform size and the body text will also be styled. To start, add the desired title, replacing the default text. Immediately after the title insert an image (Insert>Image) and finally place all the text after the image.
Now repeat this process for all the boxes added previously, remembering to save (Ctrl/Cmd+S) at regular intervals not to lose any content in case of a computer crash. Once complete, double-click body in the CSS panel to open the CSS Rule Definition window. Now select a font, size and colour, we chose the following: Verdana, 22 pixels and grey (#666666) with the weight set to lighter. This will style all text on the page. To style the title, first create a news class, Text>CSS Styles>New, set Selector type to Class, give it a name and press OK. Once again select the font, size colour etc. Our example uses the font Corbel at 30 pixels in a sky blue (#3399FF) with the weight set to lighter and the line-height set to zero. Now select each title and apply the new style via the Style drop-down list in Properties. This will make the title look odd but add opening and closing h3 tags to each title, eg <h3><span class=”boxtitle”>Get a grip on reality</span></h3> and it will slip back into place.

13 Add in anchors
Design floating pages using large fixed background images

Now it is time to create the section header titles. Go to each #section div tag and change the default text, Content for id “section” Goes Here, and change to the desired title. Now add the text back to top next to each title. Now create a new class to style the section title text. Go to Text>CSS Styles> select Class, name the class, ie headertitle and select the desired font, size, colour etc. Now apply the new class to all the section titles. Now it is time to create the link between the navigation at the top of the page and the relevant section. To do this anchors are going to be used; these will take a user straight to the relevant section. But first the anchor points need to be created. To ensure that the anchors work as intended, for this style of page, a spacer tag needs to be added. Place the cursor immediately after the end of the first rightcol tag. Hit a few returns to create space for the new code. Now create a new div tag, call it spacer and make it 875 pixels wide, 32 pixels high and float it to the left. Now copy the code and place after each rightcol tag and before each section tag. Now click inside the first spacer tag and go to Insert>Named Anchor, add a name, ie Features, and press OK. Repeat for all spacer tags.

14 Create navigation
Design floating pages using large fixed background images

Now head back to the top of the page and select the text that is to link to a section. For example, select the Features text and in the Link text box in the Properties window first add a hash symbol and then the name of the anchor that the link is to jump to, ie #features. Now repeat this for all the links. Save the page to make sure they all work and there are no spelling mistakes in the link box. All the links now jump to the right section, but to avoid having to scroll back to the top of the page every time another anchor is to be added. Immediately after the opening #wrapper tag insert a new named anchor called top. Now go to each instance of back to top, which should be next to section title, select and add #top in the Link text box in the Properties window.

15 Tidy up
To finish, a few final adjustments needs to be made. First add a set of h2 tags to each section title, ie <h2><span class=”headertitle”>// Features //</span> <a href=”#top”>back to top</a></h2>. This will cause the back to top text to be restyled so create a new class to style as desired. The footer needs to be populated and any margins and padding added. Double-click #footer in the CSS panel and add 10-pixel padding and a 25-pixel margin to the top and 30-pixel margin to the bottom. The margins help position the comment section header. Finally, the text in the footer will default to the style defined in the body tag. Head to Text>CSS Styles>New and create a new class and set font, size colour and so on. We have chosen Verdana at 11 pixels and dark grey (#333333). Finally, check through the HTML code so that the div tags are indented and there is space between the major blocks of code making it easy to read.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://www.mttamborineaccommodation.com.au/ BD

      Thanks for the tute, always a fan of the floating look with a stunning image.

    • Eddie

      You don’t say which tool is being used here. Dreamweaver? But where is the text menu?

    • DanW

      I didn’t quite understand what to do, but I am very interested.
      I’ll have another read through when I have the time :)

    • Pingback: Large Website Backgrounds - blog.anagam.com

    • Rich

      This writer left out a lot of important things a student would need. First the text menu is just that. He must be using a different version of Dreamweaver then your or I becuase his instructions dont match up to the menu. You can try format, CSS Styles, and then New or an easier way is if you have your CSS Styles panel open you normally can right click in the white space and then choose new.

      Often he says to preview your work when all you have done is set blank div tags which is useless. If you have not taken the text out you would just see that text about your background.

      Also he does not supply ( this company is big in leaving you out in the wind by not supplying graphics) What good is width dimensions etc and the disclaimer that the dimensions would be different if you dont use the graphic that is not supplied. For a newbie how the heck are you going to learn. You need experience to do this tutorial where you would then not need to do this tutorial.

      My favorite instruction is “the code for both tags is going to be copied and pasted as many times as needed.” well, what is the criteria for as needed? Your teaching us? If we knew what the outcome would be we wouldnt need you now would we?

      So like all of you I am patching, fixing, figuring out this code to see if I can get it to work with the graphics I have myself. Maybe, maybe one day they will supply complete tutorials.

    • allen

      the tool is dreamweaver

    • Bryanb

      Can you talk about the treatment of the title, the type of font, styling technique, etc…

    • Pingback: Background In CSS Design: Everything You Need To Know | WEBGRAPHIC

    • http://www.webdesigns.comyr.com Den

      Example site would nice showing the finished product with access to underlying code to examine.

      I have a basic grasp of dreamweaver from following tutorials but this seems scattered and hard to follow.

    • http://www.elsonconsulting.co.uk ElsonOnDemand

      Stumbled across this post as I’m tweaking my blog page. The writer obviously took the time to write a decent article and yes a demo and code snippets would have been helpfull, it was helpful. Just a shame too many spammers are leaving dodgy posts, which ruin the experience for everyone and leads me to disinclined to leave a comment at all. Moderators need to do pay attention please

    • http://www.nkos.org/nkos/index.php/Buy_Cialis Cialis online

      Your current write-up has established necessary to me.
      It’s really educational and you’re certainly extremely experienced of this type. You have got exposed my own face to be able to various thoughts about this topic using interesting and reliable content material.

    • http://www.extension.org.bd/index.php?option=com_blog&view=comments&pid=2357&Itemid=0 Haarausfall stoppen

      I love what you guys are up too. This sort of clever work and exposure!
      Keep up the terrific works guys I’ve included you guys to my personal blogroll.