Control Blogger's Contempo Theme Background Behavior

In creating this blog, I selected Blogger's Contempo theme because it seemed the least distracting and best suited to my needs. All the other themes had a lot going on; they were a little too busy for my taste.

One thing that bothered me about the Contempo theme was the way the background just cut's off as you scroll down the blog feed. The theme allows you to control the height with an exact value, but that wasn't enough for me. I wanted to either have the background repeat for the length of the blogger page, or have the background image static as the blogger feed scrolls over it.

I chose to make it static. Here's what you have to do to make this change.

1. Go to your blogger and click on Theme and then click on the Customize button.

2. Remove the background image, no need for any additional bandwidth costs.

3. Go to Advanced -> Add CSS, and past the code below.


The goal is to hide the Contempo blog's photo layover design so you can control the body's background. Feel free to use my background, or replace the background image with your own, and change the properties of the body's background as you see fit.

Enjoy!

Comments

Post a Comment

Popular posts from this blog

React Redux-Saga Actions - Step By Step

Image
In my adventures with React redux-saga, I've had to repeat the same process to create a new action, and there were a few occasions where I fumbled -- either I missed a step or did something out of sequence. As a result, I documented the process, step by step, so that in the future I don't waste time. I even created a small application to validate my instructions. I learned React with Redux-Saga in the Complete React Developer in 2020 Course on Udemy . I highly recommend this course. ( Note: Udemy usually has Flash sales for their courses that bring them all to under $20. This one is totally worth the investment.) To explain the process of creating a new reux-saga action, I will use a specific feature - the order search feature. It has a few parts: Upon a user's sign in, the user's orders will be fetched and presented. When a user signs out, the list of orders is reset. An admin can search for orders by a user's email. Note: If you want to skip this exp...
Read more

Deploying React Apps to GitHub Pages

Image
Github has this great feature where you can host SPAs (Single Page Applications) for free. You can make calls to firebase, pull in json files and have other external integrations. There are limitations, such as react-router and related packages do not work. But static and relatively simple html, css, and javascript sites can be hosted without issues. So, how do we do this?  Well, it's pretty simple. 1. CREATE A GITHUB PROJECT REPOSITORY Once you create a new Github project that will hold your code, you will need the HTTPS or SSH link. You can get this by clicking the Clone or Download" button. Copy that link for step #2. 2. LINK YOUR LOCAL FOLDER TO GITHUB PROJECT REPOSITORY Usually, when working in a group, most companies require an SSH key for linking to Github. Here, we are independent and really only use HTTPS for linking to Github repositories. In case you don't already have GIT For Windows installed, here is the link. This will install all the git comman...
Read more