Background Images

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

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

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

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

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

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,

Learn how to add tiled background images to a full width framework using our Thesis Full Width Backgrounds plugin.

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

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.

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

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

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

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.

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

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

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

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.

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

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