NOTE 1: Pardon the Typos: I worked on this post after working through the night. Will review and fix later.

---

NOTE2: Check out my other video covering how to setup YOOtheme Layouts in WordPress using Widgets

---

James,

I just completed a video recording divided into 6 parts totaling 2 hours and 38 minutes in creating a very customized set of CSS modifications for your specific request. The video captures every step of the process and I narrate each step and code and observation I made.

I started with only the basics, keeping it all very high level reviewing how I would approach the problem. I mention that this effect is going to be problematic to implement in Quantum for reasons that are obvious in my later videos.

I demonstrate this conceptually using the Cloud demo theme with updates made via Firebug.

I really dig deep into various nuances of CSS as I use them.

View Original Quantum Theme

View CSS Modified Quantum Theme

---

Part 1: Review and Understand the Question to Apply Fixed Background Image Effect

Watch Part 1 Video Now - Time: 11 min.

Description: In Video 1, I review the request posted by a member to apply the fixed background image effect in a YOOtheme Template. I present examples of the effect and review the approach I'll take to present this in great detail. I also review how to break apart LivingSocial.com website to understand how they applied this effect.

---

Part 2: Locating and Reviewing the Approach for Applying Update

Watch Part 2 Video Now - Time: 9 min.

Description: In Video 2, I review the Theme Demos to understand how to approach implementing the fixed background image effect. I also use Firebug to understand the markup anatomy of the theme.

---

Part 3: Apply Fixed Background Image effect to Cloud Theme (which is simpler than Quantum)

Watch Part 3 Video Now - Time: 14 min.

Description: In Video 3, I jump right into applying the fixed background image to the Cloud theme. The background was already reviewed in the first 2 videos. A lot of review of CSS and testing with Firebug is introduced.

---

Part 4: Cloud Theme Wrap Up and Staring Quantum Theme Update.

Watch Part 4 Video Now - Time: 12 min.

Description: In Video 4, I refine the styling of the fixed background image on the Cloud Theme. I also attempt to apply the fixed background image effect on the light background of the Quantum Theme Demo. I also present more Firebug tips.

---

Part 5: Begin Applying Fixed Background to Quantum Theme and Reviewing Issues

Watch Part 5 Video Now - Time: 18 min.

Description: In Video 5, I review what makes the Quantum Theme more challenging than the Cloud theme with applying the fixed background effect.
NOTE: I ended this video saying it was the last. However, a 6th video was created with even more indepth review of fully converting Quantum to fixed background image effect. Although I struggled in Video 5 with identifying solutions for Quantum Theme challenges, I do overcome them all in the next video.

---

Part 6: Applying Changes Tested in Firebug to custom.css file and other Advanced Techniques

Watch Part 6 Video Now - Time: 1 Hour 35 min.

Final CSS from Video 6

Description: I orginally planned on stopping at the end of Video 5. However, I realized I had not covered any details on how to apply Firebug CSS tests to custom.css file. Video 6 is by for the most technical and productive video with deep dive review using Firefox on Quantum Theme. I complete sytyling the Quantum Feature page with a fixed background image. Much time was spent encountering various challenges from overcoming color contrast issues between background image and HTML elements and with working with opacity.

James - I'm about to record a video for you. If you feel inclined to donate something via PayPal, I'll be more than happy to accept.

Either way, give me a little while to prepare the video review for this specifically.

Thanks,

David Carroll

David,

Thank you! I will start first thing tomorrow on the videos. I am pretty familiar with most everything you have below, I started learning Perl about 15 years ago, along with a variety of scripting languages. Over the past 3 years, I have put together websites using CubeCart, Joomla and WordPress and straight HTML. I choose WordPress this time around as I thought it would be easier for people to use than Joomla.

• CSS - 6 (but not familiar with css3.0 yet.)
• HTML - 6
• JavaScript - 2
• PHP - 7
• SQL - 7
• WordPress - 6
• Joomla. - 5

I am the weakest in JavaScript, I wish I knew it better, mostly I just copy and paste where I need it, but I haven't developed anything using it.

Jim

P.S. I am new to YooTheme. Are the Joomla versions of the templates more powerful? I see a lot more Joomla questions than Wordpress, so most people use it?

James,

Thanks for specifying. I thought you were more technical than the average Joe However, I wasn't certain.

The videos assumed you, or who ever reviews them, know very little but are able to pickup on these topics with detailed instructions.

I forgot to ask how familiar you were with Firebug. Based on your responses, I'm guessing you have a strong handle on that as well.

I'm still rendering the videos. I'll be posting them as I get them completed.

Thanks,

David Carroll

No worries... I use Firebug extensively in this videos. So, you'll get some exposure to that. I'm rendering the last video now. Will post the links shortly.

David

David,

I have watched all the videos, and I think I have identified the problem. The section of CSS above, which sets all the block element backgrounds to "none" are not working. I have used my new found firebug awareness and checked that the custom.css background of a block element is crossed out.

I take this to mean that CSS order precedence is not behaving properly. I think one way to fix the problem, and it is the brute force way, would be to create a new STYLE and take style.css over there and edit it. However, I wanted to check with you before going that route.

Jim

James,

Great feedback. I'm glad you got a chance to see how powerful Firebug is. I only used a small portion of the tool in this video with CSS modifications. The real power is in writing JavaScript, optimizing performance, testing downloaded resources, troubleshooting the state of the DOM at any given time, etc, etc, etc.

Anyway, I'll address the issues below.

1. Can you add admin access to your Hidden Section in the Question so I can take a closer look?
2. I forgot to address the scaling issue. The only way to get the background image to scale is to place it into an <img> tag as they did on the other site. This isn't too difficult if you are working with a smaller image. You will need to add this <img> tag to the template.php file... I think... that's the file. Anyway, if you give me access to your site, I can do a 7th video covering this.
3. You are correct that I was not able to test this on a live site... So, yeah, sorry... I was not able to confirm the styles would be ignored. Thanks for mentioning that. You can overcome the issue with styles being overwritten by adding !important prior to the semi-colon on the relevant style rules.

Example:

body#page {    
    background: url("http://a3.ak.lscdn.net/imgs/9a959c7a-7e01-4f41-aa7b-d3481aa1abef/original_q60.jpg") repeat fixed left bottom transparent !important;  
}  

Notice the !important I added inside the semi-colon ( ; ). Many people make the mistake of adding !important after the semi-colon and fail to achieve the results they are looking for.

David

Hello,

This is the one I need the most help on. Can anyone point me in the right direction? I would even consider hiring a developer familiar with YooTheme Templates if there is one out there that can help me.

Jim

David,

If it helps, absolutely!

Jim

James,

Can you give me a sense of how technical you are? How would you rate your skills in the following:

Rate these from 0 to 10 where 0 is no knowledge to 10 as Expert Level.

• CSS
• HTML
• JavaScript
• PHP
• SQL
• WordPress
• Joomla.

I ask because I don't want to be too basic or too advanced in my responses. It helps to have a context of understanding regarding your skills.

Thanks,

David Carroll

David,

I am more use to the Web Developer's Toolbar than Firebug. I like the View Style Information tool as I can just point at an element and get see the CSS. I am sure you can do something similar with firebug, just haven't picked it up yet.

Right now, I am just trying to figure out YooTheme, Warp, and Wordpress all in one. My last project was RocketTheme, Gantry and Joomla. The same thing but completely different.

Jim

UPDATED: I added !important to various style rules to make styles priority over styles loaded from other files.
I was notified that some style rules were cancelled out by other rules that were marked as priority. I simply added the !important attribute to the style rules to resolve this issue. This is not covered in video 6.

Quantum Theme Custom CSS from Video 6

The CSS below was built specifically for the Quantum Demo during Video 6. You will need to setup the Quantum Demo to ensure it works properly. Then modify as you'd like.

One final note: I realized I somehow mistakenly started applying all this to the Features page, not the home page. However, I was too far to start over on the Home Page. So, it's possible you may need to apply additional style to the home page Slider Gallery section.

Here are the resulting CSS scripts to add to the bottom of your /css/custom.css file.

body#page {  
    background: url("http://a3.ak.lscdn.net/imgs/9a959c7a-7e01-4f41-aa7b-d3481aa1abef/original_q60.jpg") repeat fixed left bottom transparent !important;  
}

#block-bottom > div,  
#block-top-b > div,  
#block-top-b > div > div,  
#block-bottom,  
#block-header,  
#block-main,  
#block-top-b,  
#block-header,  
#block-main,  
#block-toolbar {  
    background: none !important;  
}

#header,  
div#main,  
section#top-b,  
section#bottom-b{  
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=80)" !important;  
    filter: alpha(opacity=80) !important;  
    background-color: #333333 !important;  
    background: rgba(51,51,51,.8) !important;  
}  
#header {  
    margin: 0 !important;  
    padding: 15px !important;  
}

#block-toolbar > div {  
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=80)" !important;  
    filter: alpha(opacity=80) !important;  
    background-color: #0F0F0F !important;  
    background: rgba(15,15,15,0.8) !important;  
    padding: 8px 0 !important;  
}

#block-footer {  
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=90)" !important;  
    filter: alpha(opacity=90) !important;  
    background-color: #0F0F0F !important;  
    background: url("../images/footer.png") repeat-x scroll 0 0 rgba(15,15,15,0.9) !important;  
}  

NOTE: The Smiley Faces in the code are supposed to be "8" and ")". The editor automatically changed them into emoticons.

David,

Thank you for working so hard on this. I very much appreciate it. I will work through this later today as I have a morning appointment. I do use the Quantum template, but a very much stripped down version, I don't use a lot of modules in this design. Also, I don't want to limit the background image to just the Features or Home page, but all pages on the site. I will see if I can figure that out when I get to that point.

Thank you again, and I will let you know how it goes.

Jim

David,

I don't see a way to send personal messages, so I am not sure how to collect your paypal you when I am ready.

Jim

James, You can email me me at david.carroll@softrealty.com. This is also my PayPal email address.

Thanks,

David

David,

I started with the videos. To get a flavor of what could be done, I jumped to #6 so I could see the end result. I also tried the CSS code you included in both a local version of Quantum and a customer dev site. I have a couple of questions so far.

1. If I put in all the CSS you gave me into the custom.css, I should see something correct? You said in the demo you are not running a local version of Quantum, and that all the edits you have are pulled from firebug, directly (which is cool btw, live editing is nice), but you did not run it against a actual site.

   1a. My local version is the default Install of the Quantum Demo installer, but I did update Wordpress to 3.3.1.

   1.b. I thought that by putting in the CSS, I would get something. I watched almost all of the last video, but I didn't see that I needed to do anything else besides update custom.css. What else might be going on?

2. In video 1, you mentioned that I said scaling, but pointed out that background images in CSS do not scale. If you adjust the size of the browser in the living social site, you will see that the image does stretch and shrink depending on the open browser window. Since I can't get this to work yet, I can't test out the results, but I thought I would bring up this point.

Thanks,

Jim

David,

I really like firebug now, thanks. I will start using it more often.

1. I am new here, never used a forum like this, one that operates on tags. I have no idea where the admin hidden section is.

2. Scaling - I am using the image you used, and in FF, IE, Chrome, the image is shrunk to the browser window width, and then it starts to repeat horizontally. It is not this huge image, it seems to fit to the windows.

2a. I would be happy to give you access to the site, however, I would insist that you not make a video with it. There is huge privacy issues associated with my client who is a friend.

2b. Setting up a local server - have you used xampp for windows? Takes 5 minutes to install a fully working local server. It allowed me to install full demo versions of a bunch of templates in a few min.

1. Thanks, I tried the !important tag first, but I forgot to put it inside the semi-colon.
   3a. In order to get it to work, I had to put the !important tag on the background: none block below too.

Notes to finish up: I put in a really dark background and it looks beautiful.
1. Both the Toolbar and the Footer go all the way across the screen, I would like to wrap it them both up in the same width as the other elements and we are done.

Unfortunately, I have to run now, but I will come back later tonight or tomorrow to finish it up. I will send you a picture by email.

Jim

Jim,

1. To provide information privately, simply go to the original question at the top of this page, click Edit, then, under the edit box, click the link starting with Add hidden information to open the edit box that will only be visible to official support moderators.

2. You can disable background image repeats by editing the CSS background style rule with any of the following:

• no-repeat
• repeat-x -> Repeats image horizontally along the x-axis.
• repeat-y -> Repeats image vertically along the y-axis.

2a. No worries about the video. It was just a suggestion in case you wanted to see how I would approach the fix.

2b. I'm very familiar with XAMPP. However, as a developer, I've got soooo... many projects running. It get's a little crazy adding new Document Roots for demo purposes. I really need to setup a new Virtual Machine dedicated to demos. I'm sure you know what I mean from your own experiences.

Regarding your final note on containing the footer and header bars to the same widths of the rest of the page body, I believe you need only apply what I did in Video 6 with the various body elements that also spanned the entire page. I'd need to review your website to with Firebug to know for certain how to instruct you.

Also, I updated the CSS with the !important attribute for others to review.

Thanks,

David

David,

Note: This forum software is difficult. This is the third time one of my replies did not post properly and now I am need to type it again.

1. I added the login info to see my site in the hidden section.

2. I was able to fix the footer. I added the #block-footer id to the larger background: none section of your CSS and then altered the lower #block-footer to apply to the wrapper class under it. The bottom section now looks like:

   block-footer .wrapper {

   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=90)" !important;    
   filter: alpha(opacity=90) !important;    
   background-color: #0F0F0F !important;    
   background: url("../images/footer.png") repeat-x scroll 0 0 rgba(15,15,15,0.9) !important;    
   

   }

Note: I first put !important tag on every line like you did, but it was only needed on the body#page and background:none sections in practice.

Thank you so much for your help. I must say, I used a dark background and lightened up the transparencies a little bit and the site looks really cool.

Jim

That is fantastic!!! Also, thanks so much for the PayPal payment. It's one thing to passionate in helping others. It's a whole other thing when people show thanks this way.

One issue with the current support system is it times out after a while. Just go back to the previous page, where you typed your response, hit the refresh button, then click "Post Answer". That works for me in Firefox anyway.

Thanks,

David Carroll

David,

Thank you very much for your help, you certainly deserve it and I am glad you like the website I am working on. It is still a work in progress and you probably don't even recognize it is Quantum.

But we are not quite there yet. There is the scaling issue, which is now made less important because I made the image much larger. However, on Chrome and IE this effect does not work quite as well. The screen flashes white as it loads, each and every page click. It is annoying as hell and does not occur on the demo version of the site.

On FF, everything is great, but the other browsers are giving me problems do you know what is wrong?

Thanks,

Jim

I'll take a look sometime tonight or this weekend.

David,

I found a great article that talks about how to scale a background image. It is now possible to do it in CSS3 fully. It also lists several other ways to do it too.

http://css-tricks.com/perfect-full-page-background-image/

Jim

James,

Thanks for sending this. Chris consistently posts some amazing scripting tips. One day when I have some time, I'd like to start publishing content similar to his site.

That said, I was experimenting with the background-size attribute, as demonstrated in CSS Only Technique #1.

Essentially, the change to this CSS would need to be:

body#page {    
    background: none !important;  
}  
div#page-bg {  
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://a3.ak.lscdn.net/imgs/9a959c7a-7e01-4f41-aa7b-d3481aa1abef/original_q60.jpg', sizingMethod='scale');  
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://a3.ak.lscdn.net/imgs/9a959c7a-7e01-4f41-aa7b-d3481aa1abef/original_q60.jpg', sizingMethod='scale')";

    background: url("http://a3.ak.lscdn.net/imgs/9a959c7a-7e01-4f41-aa7b-d3481aa1abef/original_q60.jpg") repeat fixed left bottom transparent  !important;

    -webkit-background-size: cover !important;  
    -moz-background-size: cover !important;  
    -o-background-size: cover !important;

    background-size: cover !important;

    width: 100% !important;  
    height: 100% !important;  
}  

I just tested it on the Cloud Demo using Firebug and it works incredibly well. Would you mind testing this on your site?

I obviously haven't tested this in IE 6, 7, 8, or 9. However, I did apply the suggested work around in his follow up update.

NOTE: background style was moved from <body> tag to <div id="page-bg"> tag. This may also resolve your strange flickering issue.

Would you mind applying the CSS above to your site and let me know how it works out.

Best Regards,

David Carroll

David,

Sorry it took me so long to get back to you on this. Since I marked your answer above as "the Answer" I no longer get emails on this thread. Is there a way to fix that?

Overall your approach did not work for me, I suspect that is because there isn't a '<div id="page-bg">' element in the Quantum theme. It is nice to know it is there in other themes.

Question:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://a3.ak.lscdn.net/imgs/9a959c7a-7e01-4f41-aa7b-d3481aa1abef/original_q60.jpg', sizingMethod='scale');

There are two links under source, one in square brackets, the other in regular parenthesis. In my statement, I just use a relative link an image I store locally and it works.

Notes - on my theme I noticed

1. Width and Height properties were not needed, it looks the same on Safari, IE, FF and Chrome without them.
2. !important is also not needed on every line. It looks like to me it is only needed when you try and zero out a property that is already set, like setting that background to none would need it.

Background Flicker:
This is the most noticeable on dark theme websites. It happens with all websites, but if you have a white page, you see the effects much less. FF works the best in overcoming this problem. Safari the worst. You can reduce this effect greatly by setting a solid background color as it will load much faster than the image.

I tried doing this:

html, body { background-color: #000 !important; }

But it doesn't work. It does help reduce the flicker in Chrome, but it creates another problem where the background graphic will no longer drop down past the footer (only seen on short pages, where the footer is not locked to the bottom of the browser window). I have no idea why this happens, it just does.

My solutions is to include a background-color element in my body#page element and make it !important. This helps with IE, but Chrome and Safari are unaffected.

Jim

Yikes... I just realized I was working on the assumption that the various theme markup was mostly similar. I turns out the template.php file is theme specific. Sorry for that.

One thing you could experiment with is wrapping all tags between <body></body> with <div id="page-bg"></div> or something like that.

However, I just tested this on my computer and could not see the flicker effect in Chrome / FF / Opera / Safari / IE9 on WIndows 7.

Did you make another change to resolve this. This is the first I've attempted to test for the flicker.

Thanks,

David Carroll

david you are so awesome!!

Hey, thanks! Glad this was helpful.

Hi David, I've been watching your excellent videos in the hope I might find the answer to my question below that I posted yesterday. Can you point me in the right direction please?

Question:

Stop custom background image repeating on Cloud Theme WordPress

I'm building a site using Cloud theme where I've replaced the default watercolour background image with my own image. I want the image to appear only at the top of the pages but the image is repeating at the foot of the page also. The site is not live at present, I have provided login details.

Thank you, Gerry

cant watch the video hmmmm