This tutorial will cover how to create a background theme with a repeating pattern image.
The requirements are: Firefox or Chrome for a browser, then go to this site and install Stylish and the tumblr - Clean Slate theme.
Here we go!
Seamless, Repeating Floral type pattern - 200px x 200px
Step 1 - Find your desired image for a repeating background pattern and copy the url. Paste the url between the quotation marks in the section marked BIG BACKGROUND. It should look like this:
background:url(“<PASTE HERE>”) no-repeat fixed !important;
This same line will be edited again in Step 3 for demonstration purposes. If you already know what lies ahead, feel free to edit it now.
Left to Right: Original Generic Blue, Steps One to Four
Step 2 - The default code sets the size of the background image to 100%, width and height. Although the initial pattern would be suitable for display, it does not meet the objective of this tutorial. In the section marked BIG BACKGROUND, either delete or comment the line for background size. For an example of a deletion, please stare at a blank spot on this page :P A commented line looks like this and will not interfere or be executed when the style is enabled:
/* background-size: 100% 100% !important; */
Step 3 - The pattern image is now the correct size and in the correct position, but it does not cover the entire screen. To resolve this, simply edit the same line containing the url to read “repeat” instead of “no-repeat”:
background:url(“<http for your image>”) repeat fixed !important;
OPTION: “Fixed” in this line means the background will not move when scrolling the window contents. If “fixed” is deleted (or commented) the background will move with the window contents when scrolled.
The remainder of the tutorial explains editing code for content opacity, color and something else discovered along the way! If this isn’t necessary for your style, skip ahead to Step 5.
Step 4 - Go to the section marked CONTENT and set the background opacity for the content pane. Minimum 0.0 = clear / Maximum 1.0 = solid. Any number in between will be semi-transparent. The number to change is the last one of the four. The first three are for the color (tumblr blue).
0.25 was used in this example.
background-color: rgba(44,71,98, 0.25) !important;
If you are not satisfied with the CONTENT color, edit the first three numbers in parentheses to the appropriate rgb values.
Step 5 - Save and enable your new style. Other settings in the style will be applied automatically.
Final Display After Saving Tutorial Style
If you are feeling really adventurous, there are also places to change the following within this style:
ICON BAR BACKGROUND
Please feel free to ask if you have questions or need help.
Oh yeah, the “something discovered along the way”…
From One, Many
I wasn’t up front with all of the details surrounding the pattern chosen for this tutorial. The pattern displayed at the beginning of this tutorial, while somewhat accurate, does not reveal in full what lies beneath.
Left to Right: Tutorial Pattern, True Original Pattern, True Original Inverted, Inverted with 50% Opacity
The original pattern for this tutorial is actually a darker floral pattern as shown above. The image color was inverted and the opacity was reduced to 50%, using a graphic manipulation application. What does this all mean?
BIG BACKGROUND color edit, CONTENT color edited to match
By using an image as a type of semi-opaque mask, any color below this image will show through. Returning to the BIG BACKGROUND section and altering the rgb values (and opacity) results in a pinkish/fuchsia color:
background-color: rgba(255, 0, 128, 1.0) !important;
Since the color for the CONTENT pane is preset to tumblr blue, the color/opacity coupled with the new background color has a slightly bluish tint to it.
To correct this, the color for CONTENT needs to be altered to match the new BIG BACKGROUND color, with some adjustment for opacity. This is an excellent example of color and opacity blending together to create a different color or different levels of opacity from the same color.
In editing the color for CONTENT, the rgb numbers were adjusted by 50%, to match the new BIG BACKGROUND color without appearing solid:
background: rgba(128, 0, 64, 0.25) !important;
Using a semi-opaque background image and editing two lines of code for color and opacity can produce a myriad of possible combinations…with just those two elements alone!
Examples of BIG BACKGROUND/CONTENT color and opacity
I am not in a position to calculate the math on this, but please consider: 16 million colors multiplied by a 16 million color overlay, in combination with the possibility of altering each resulting combination in 100 different ways.
Examples of BIG BACKGROUND/CONTENT color and opacity
Well, it’s a big number, even if you eliminate duplications. Then factor in a pattern limited only to the creator’s imagination (which also might contain colors of its own). The number is becoming exponential.
BIG BACKGROUND - 0, 0,0 255 / CONTENT - 255, 0, 0, 0.25 with +0.25 increments
The implications beyond the scope of this writing have lead me to believe I might not have enough time to fully see all of the ideas currently racing around in my brain come to life. Hopefully, some of you feel the same!