Build Your Own Business Website header image

Background Images

Background Image that Spans Both Header Area and Content Area

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

In this session we discuss how to locate a background image so that it spans both the header area and content area. We examine the area in question in Firebug and talk about both where and how the image needs to be positioned. We also talk about how to position the sidebar content in a

Lesson 5 – Part 3 – Style the Background

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

Applies to -

So we've got our images cut out of the PSD file and we've got our images uploaded to the site. Now we're going to start styling the background. Before we style the background with CSS, I want to just go take a look at the Thesis Design Options on the site. Here we are on

Troubleshooting Background Image Display Issues in Thesis

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

In this session we troubleshoot background image display issues in Thesis. We look at the custom.css for the site in Firefox and discover the issue is that the image was being defined as a .jpg but it is actually a .png. Member: Okay great, thank you. Rick: Okay. So you’re having difficulty getting a background

How to have a Fixed Background Image with a Transparent Page in Thesis

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

In this session, a member wants to know how she can have a fixed background image with a transparent page in Thesis. We show how to do this by customizing the body and background area using our BYOB Thesis Full Width Background Options plugin and then making the content area background and #content_area.page transparent. We

Background Images Disappear When Using Web Developer

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects - ,

In this session, we discuss why the background images disappear when using the Web Developer Addon for Firefox. Web Developer cannot interpret relative URLs for background images. Member: Now one other question while I have on here, if I may. Rick: Sure, absolutely. Member: When I go to the site that I’m building right now

One Hour Website Makeover DJ Sean Denard Part 8 – Adjust Header Background Image Location

This is Part 8 of the One hour website makeover for DJ Sean Denard’s site and in this session we show how to adjust the header background image location using the BYOB Thesis Header Widgets. Okay so now, we go back down to header row 3 settings and our header row 3 background style. We’re

One Hour Website Makeover DJ Sean Denard Part 5 – Adding the Background Images

This is Part 5 of the One Hour Website Makeover for DJ Sean Denard’s site and in this session we show how to add and configure background images using the BYOB Thesis Full Width Backgrounds plugin. The other thing to do is to start flushing this page out so that instead of looking like this,

Style the Full Width Framework by Layering Background Images Part 2

This is Part 2 of 2 in a series on How Style the Full Width Framework by Layering Background Images. In this session we continue to show how to layer background images using the BYOB Thesis Full Width Backgrounds plugin. Now the problem with this is of course, we’ve got these other images that need

Style the Full Width Framework by Layering Background Images

Learn how to layer background images easily using our Thesis Full Width Background plugin. We demonstrate how to add an overall background image, then add images for the header, page and footer areas.

Add a Background Image to the Header Area Using the BYOB Thesis Full Width Backgrounds Plugin

In this session, we demonstrate how to install our BYOB Thesis Full Width Backgrounds Plugin and then discuss its many features. With this plugin you can currently customize the background areas of body, header, content and footer in a full width framework Thesis site. Okay I want to just quickly demonstrate my cool plugin that

How to Use Images as Bullets in List Items of an Unordered List

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - , , ,

In this session we discuss how to use images as bullets in the list items of unordered lists as requested by a member. We show how you to do this by uploading background images to use as bullets in your list item and then use a little CSS to adjust. Okay so let’s see. So

Adding a Background Color to a Category Widget

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

This member is concerned that her category widget doesn’t look good because it doesn’t fill the space available. I suggest using a background color to frame the widget and demonstrate the code needed to accomplish it. Lorraine: You’re looking at categories… between the end of categories and the page? Rick: You mean right here? Let

Using a Table to Create a “Skin” for a Video Player

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects - ,

This member is using a table to create a frame (or skin) around a YouTube video player. Unfortunately there are gaps between the table rows which prevent the frame from looking right. We discuss the use of tables for layout purposes and how a table needs to be created in order to perform this task.

Lesson 4 – Part 1 – Adding a Simple Tiled Background Image

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Hi and welcome to Lesson 4 of the Customize Thesis Like a Pro tutorial series. In this lesson, you’ll learn how to customize the appearance of your Thesis theme website using background images. Background images can be used anywhere on your site – from small buttons to large images. On this site here, background images

Lesson 4 – Part 2 – Understanding the Background Image Properties

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Welcome back to Part 2 of Lesson 4 of the Customize Thesis Like a Pro tutorial series. In the 2nd part of this lesson, we are going to look in detail at the various properties associated with the background image. Default Behavior of the Background Image Property Right here the background image has performed its

Lesson 4 – Part 3 – Adding Additional Semi-Transparent Tiled Background Images

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Welcome back to Part 3 of Lesson 4 of the Customize Thesis Like a Pro tutorial series. In the third part of this lesson, we are going to add a layered effect to this by adding semi-transparent background images on a Thesis theme page. But before we dive into that, we need to look at

Lesson 4 – Part 4 – Adding a Fixed, Non-scrolling Background Image

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Welcome back to the fourth and final part of Lesson 4 of the Customize Thesis Like a Pro tutorial series. In this final part of the lesson, we are going to swap out this tiled background image for a fixed non-scrolling background image and then mess around with these layers again in the Thesis theme.

Lesson 4 – Customizing Backgrounds With Images and Color

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

An important tool in the arsenal of a designer is the CSS background image property.  Background images can be used as backgrounds for pages, to highlight elements of the site and to bring an artistic flair to an otherwise straight forward site.  One example of this is a Thesis theme website I recently finished designing for a

How to Use a Background Image in a Sidebar

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

A member asked how to add a background image to his sidebar.  We use Firebug and Web Developer to identify the image and the various elements that will give him the effect he wants.  His site presents the challenge of already having a background defined that interferes with the sidebar background display. Okay so I’m