We all have seen those slick websites that use effects on their page such as scrolling backgrounds (a.k.a fixed backgrounds). With RSD, you can easily have this same effect with just a few steps.

Step 1

Download the basic fixed background theme below and open the theme in Responsive Site Designer.

Fixed Background Example

Step 2

Locate the column in the middle of the theme with the class name of “fixed-column” and navigate to the design pane. Under dimensions set the min-height to 300px.

Changing the min-height

Step 3

Select the row with the class name of “fixed-background-row” and set the max-width of the row to none.

Max-width: None

Step 4

Select the image dropdown in the background section of the design pane and choose URL. Then paste the URL http://rsd.coffeecup.com/storage/themes/the-coast/spices-cropped.jpg into the input box below the image dropdown.

Choosing a URL

Step 5

For the position values, choose center for both the vertical and horizontal dropdowns.

Background position: center

Step 6

Using the Size dropdown, select cover. This will ensure that the background will cover the entire row.

Set the background size to cover

Step 7

Select the attachment dropdown and select fixed.


That is all it takes to create a cool fixed background feature in Responsive Site Design. Now, go take what you have learned and put it to good use. Code well my friends!