Make your own! Choose color, pattern, and texture!

Hi Res Hi Quality MOVIE Wallpapers

Wow! (I'm giving up one of my secrets here! )

FREE says it all! Get the hi res larger versions for backgrounds or smaller ones if you know the size you want.

Please help yourself to the tons of wallpapers posted up on my site to share.

This should work if it doesn't you will tell me.. I know you will
Link on bottom will return you to your Inbox I couldn't link it back to here as I hadn't posted this yet

Just a few animated backgrounds I found, they all tile seamless

I occasionally upload backgrounds and banners, and tonight I uploaded a ton of them into two albums.  So help yourself.  (Someone is going to love these!)  lol  Be sure and Zoom to get the hi resolution photo since most of these are large!  These should work well  as "fixed" backgrounds if you get the hi res photo.






These links will open in a new tab for you.

 AMAZING BACKGROUNDS & BANNERS⁺⁺⁺

AMAZING BACKGROUNDS & BANNERS 2⁺⁺⁺


Here are ones that I already had up if you would like to browse through these too:

3D_Wallpapers_2⁺

3D_WALLPAPERS⁺

3D_WALLPAPERS⁺

MORE_OF_NATURES_WALLPAPERS⁺

NATURES_WALLPAPERS⁺

STUNNING_WALLPAPERS⁺

GORGEOUS_WALLPAPERS⁺

BACKGROUNDS_FOR_MULTIPLY_⁺

For sure it's the most asked question, besides transparency (well, at least before Custom Color and Whiteout appear), so it's a quick answer:

ANIMATED ARROWS
ANIMATED BUTTONS
MINI MOVIES
ANIMATED GLITTER TILES
ANIMATED DESIGN TILES
BACKGROUND MASKS
ANIMATED CREATURES
ANIMATED ATTENTION GETTERS
ANIMATED ALPHABETS

Really cool stuff plus you get to choose your color.. Go crazy! lol

Hotlinking and Bandwidth Theft Simplified

A gallery for tiled pattern backgrounds.

My favorite tool for making stripes. You can specify everything (color, spacing, gradients), preview full-screen, and download the image file. You can also access their other tools from the site, such as the Tartan Maker, Tabs Generator, and Reflection Maker.

EDIT: Glad you guys enjoyed the links! They've been sitting around my other blog for a while now; glad to know I was able to share this with more people. Got them via graphic design blogs, by the way. Gotta love the internet. :D

ONE Code - Multiple Uses!   Embedded Backgrounds  (Table Code)

There is an excellent tutorial with screenshots HERE
that teaches you "How to add a bordered background to your blog using a Table Code". This tutorial will expand on this, providing a more layered and complex look.  Don't worry.  I'm not going to teach you to "write" the code.  I'm just going to give it to you!

Here's a "ready made" code that you yourself can change out the background image property urls for ANY occasion!  Once you do it, it's done until you wish to use it or edit it for a different occasion.  Or make one for each!

First, CLICK HERE to see how I used mine (text).  (Screenshot isn't animated - link will show you it is)  Also you can see the actual code in action, bottom of this post.

Now, notice that no matter WHERE you right click on this, on my site, and the example below,  you will only see "save background as".   Not "save image as".   That is because it IS all backgrounds.  These backgrounds are layered and embedded, one on top the other. 

Look at the code (in notepad) Notice the MULTIPLE places for YOU to put YOUR image property url from your hosted backgrounds.  You can notice my repeat pattern and repeat the same way, or differently.  It's up to you.  (I am leaving my url's so you can post it "as is" by ticking the html box, paste the code, untick the html box, and see exactly what it looks like.  Just tick the html box again to make your image url changes.  Untick, and place your cursor in the text box to change the text, insert images or use the other blog toolbar options. 

For this one there are several different background images used.  They are repeated and embedded to get THIS look.  You can make yours look any way you wish for any occasion or Holiday and use as many different background images that you want.  But for now, (so you have a reference) you may wish to save each of my backgrounds I used for this, to your album, and change out the url's to your urls (in case mine are removed).

Once done, you can change the text area background color, add your OWN text there, an even insert an actual image.

Step by step...

1.  Post/Blog
2.  Tick the html box
3.  Paste code
4.  Untick the box

WYSIWYG!  What you see is what you get!  Put your cursor on the text, back over it and put your own text in.  The inner box will expand as you add your text, images, etc. to accomodate.

Tick the box again to change the background image url's or repaste from notepad.  (Save as draft as you go along)

Untick the box to add your text and use the blog toolbar to add images, adjust your text etc.

Make your first one, or store this one in a blog, and set it to you only.  (You can even back date it to move it further back in your blog and out of your way)  Then you have it to go back to whenever you are ready to make your own.  You can even attach the text file to the blog as I did here.

Code is attached to this blog!  Just right click, "save as" on the attachment and save to your computer.  Then try it when you get a chance.  I have left MY image urls so you can test the posting in a blog "as is" first.  (instead of "image url here" like we normally do)

YOUR TEXT GOES HERE AND THE TEXT BOX WILL EXPAND IN SIZE AS YOU TYPE! HOW COOL IS THAT?

 

In this series I will try to explain the CSS basics. It's hard to discuss all the properties and options in just one tutorial, so I will add more posts eventually. Make sure you also check out CSS Logics and Multiply Design 101 in the group for additional info.

Let's start with the box model. CSS uses a very simple box model when you can control the dimensions, padding, border and margin. From the W3.org website:

Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas; the size of each area is specified by properties defined below. The following diagram shows how these areas relate and the terminology used to refer to pieces of margin, border, and padding:

The margin, border, and padding can be broken down into top, right, bottom, and left segments (e.g., in the diagram, "LM" for left margin, "RP" for right padding, "TB" for top border, etc.).

The perimeter of each of the four areas (content, padding, border, and margin) is called an "edge", so each box has four edges:

content edge or inner edge

The content edge surrounds the rectangle given by the width and height of the box, which often depend on the element's rendered content. The four content edges define the box's content box.

padding edge

The padding edge surrounds the box padding. If the padding has 0 width, the padding edge is the same as the content edge. The four padding edges define the box's padding box.

border edge

The border edge surrounds the box's border. If the border has 0 width, the border edge is the same as the padding edge. The four border edges define the box's border box.

margin edge or outer edge

The margin edge surrounds the box margin. If the margin has 0 width, the margin edge is the same as the border edge. The four margin edges define the box's margin box.

Each edge may be broken down into a top, right, bottom, and left edge.

The dimensions of the content area of a box — the content width and content height — depend on several factors: whether the element generating the box has the 'width' or 'height' property set, whether the box contains text or other boxes, whether the box is a table, etc. Box widths and heights are discussed in the chapter on visual formatting model details.

The background style of the content, padding, and border areas of a box is specified by the 'background' property of the generating element. Margin backgrounds are always transparent.

So basically each selector used in the CSS code refers to a box on your page. Boxes can be put one over the another, moved and so on. Besides it's dimensions, you can also change its position, either relative to other boxes or make it absolute so you can position it using X (horizontal) and Y (vertical) coordinates like the ones you use in a Mathematics graph.

Below are the most common %elements used in boxes and possibles values (you can search on the internet for more info using something like 'css background' etc):


dimensions
To configure a box size, you can use numerical values (100px, 480px, etc), auto or percentage values with:
- height: Sets the height
- line-height: Sets the distance between lines
- max-height: Sets the maximum height
- max-width: Sets the maximum width
- min-height: Sets the minimum height
- min-width: Sets the minimum width
- width: Sets the width of an element
Example (sets the height of the box that contains the Page Title and nav menu)
div.owner_nav {
height: 199px;
background: none;
}

display
The values of this property have the following meanings:
- block: This value causes an element to generate a block box.
- inline: This value causes an element to generate one or more inline boxes.
- none: This value causes an element to generate no boxes in the formatting structure (i.e., the element has no effect on layout and it's not displayed at all).
Example (hides the icons in the top nav bar/header):
li.gnopt a img, li.gnoptsel a img { display: none; }


visibility
The 'visibility' property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the 'display' property to 'none' to suppress box generation altogether). Values have the following meanings:
- visible: The generated box is visible.
- hidden: The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendents of the element will be visible if they have 'visibility: visible'.


overflow
Controls how the content that does not fit the box dimensions will be handled. You can use:
- visible: Default. The content is not clipped. It renders outside the element
- hidden: The content is clipped, but the browser does not display a scroll-bar to see the rest of the content
- scroll: The content is clipped, but the browser displays a scroll-bar to see the rest of the content
- auto: If the content is clipped, the browser should display a scroll-bar to see the rest of the content
Example (add scrollboxes to replies when they contain long text lines or images):
.reply {
overflow: auto;
}


position
- static: Default. An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations);
- relative: An element with position: relative moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position;
- absolute: An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element's position is specified with the "left", "top", "right", and "bottom" properties;
- fixed: An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties. The element remains at that position regardless of scrolling.

Example (position the Page Title):
h1#page_owner_title {
position:absolute;
left:100px;
top:150px;
}


color
The foreground color, mostly for text. You can use a value like #FFF or #C0C0C0 or a name like red or transparent. Example (color for the main text on your page):
body {
color: black;
}


background
The background color and/or image. Example (general page background):
body {
background: white url(http://images.multiply.com/multiply/logo/logo-on-letters-70.png);
}

You can set the image and color separately, like this (in this case the order does not matter):
body {
background-image: url(http://images.multiply.com/multiply/logo/logo-on-letters-70.png);
background-color: white;
}

Remember that if you use the same statement only the last one will be used, so this will make your background be only blue (no image):
body {
background: url(http://images.multiply.com/multiply/logo/logo-on-letters-70.png);
background: darkblue;
}

For the background image, you can also use some other properties:
- background-attachment
values: fixed or scroll
- background-position
values: top, bottom, right, left, center or value
- background-repeat
values: no-repeat, repeat, repeat-x, repeat-y

You can also combine them in just one line, like this:
background: darkblue url(Image_URL) fixed no-repeat center;


border
Sets the color, type and thickness of the border (click here for a tutorial in the group).
Example (sets the rail border):
.rail {
border: 2px solid black;
}


margin and padding
The margin and the padding values can be set in just one line in the order "top right bottom left", one value for all the dimensions or separated in different lines. For example:

padding: 10px 5pix 12px 0px;

is the same as:

padding-top: 10px;
padding-right: 5px;
margin-bottom: 12px;
margin-left: 0px;

As you may already know, you can also do the same to change the border for just one part of the box (put a border bellow the titles on your main page):
.itemboxsub {
border-bottom: 2px dotted #fff;
}


If you want to suppress an %element, you can use:
- transparent for the color. Example (content boxes on the main page with no background):
.itembox {
background: transparent;
}

- none when you may have multiple parameters, like 'background-image' or 'border'. Example (no border and no background image in the rail):
.rail {
background: none;
border: none;
}

- 0 when you have values, like 'padding' and 'margin'. Example (no margin for the itemboxes):
.itembox {
margin: 0;
}


To remove the background completely (make it totally transparent), you can use:
background-color: transparent;
background-image: none;

or:
background: transparent none;


For a quick reference about the most used commands, see this page at w3schools.com.

It seems that there is a lot of misunderstanding about how CSS works, so I will try to clarify some points.

All CSS code is like this:
selector {
%elements
}

selector is the name of the class or id used in your page, for instance itembox is name of the content boxes on your main page, etc.

The %elements are the properties of the selector, like color, borders, etc.

So, for instance, if I want to make my itembox text white and use a dashed green border, I would add this code to the end of my Custom CSS:
.itembox {
color: #fff;
border: dashed 1px green;
}

Why add the code above to the end of my Custom CSS? Because the last code in your CSS (for the same %element) is the one that will be displayed on your page.

Let's makes things clearer. Suppose that my CSS looks like this:

body {
	background: none;
	background-color: #f4f6f8;
	width: auto;
}
div.bodywrap {
	background-color: #fff;
}
table#content_wrapper {
	width: 840px;
	margin: 0 auto;
}
a, a:visited, a:link { color: #0b5eb4; }
div.owner_nav b.br, div.owner_nav b.bl {
    bottom: -1px;
}
.railstart {
	margin: -105px -1px 0 -1px;
	height: 130px;
	background-color: #558eca;
	border: 1px solid #36a;
	border-bottom: none;
	position: relative;
}

and at some point I decide to use an image as the background for body, what should I do? I have two options:

1) Go back and edit the beginning of the code, like this:

body {
	background: url(http://i18.tinypic.com/1440gar.jpg);
	background-color: #f4f6f8;
	width: auto;
}
div.bodywrap {
	background-color: #fff;
}
table#content_wrapper {
	width: 840px;
	margin: 0 auto;
}
a, a:visited, a:link { color: #0b5eb4; }
div.owner_nav b.br, div.owner_nav b.bl {
    bottom: -1px;
}
.railstart {
	margin: -105px -1px 0 -1px;
	height: 130px;
	background-color: #558eca;
	border: 1px solid #36a;
	border-bottom: none;
	position: relative;
}

2) Simply add this code to the end of my Custom CSS, after all the other code:

body {
background: url(http://i18.tinypic.com/1440gar.jpg);
}

I don't need to repeat all the other stuff, because I am not changing them, I just want to change the background image.

As a last reminder, always double-check your code for errors. The most commons are:

- missing or extra closing "}": they are always in pairs, if you open one you have to close it. Never leave an extra one if you delete something.

- missing ";" for %elements: each %element must end with a semi-colon.

- missing or extra spaces: sometimes you have to use spaces, like this:
background:url(http://i18.tinypic.com/1440gar.jpg) center;
sometimes you can't use spaces, like this:
border: solid 1px green;
sometimes it's optional.


If you cannot find the selector you want to change in the base theme CSS, try ones of these (there are the 'generic' CSS's that are loaded before the theme CSS):

http://multiply.com/style/site/
http://multiply.com/style/local/

Hope this helps. If you have any question, feel free to ask.

OK, now you already know a bit of CSS and want to create your own theme... So what are the basic steps? Actually you do not create anything from zero (OK, you are really good you can do it), but you modify one of the base themes. It's much easier and that's how all the theme designers start. These are the basic steps:

1. Select a base theme: click on Customize My Site at your main page and then on Choose a Theme in the yellow banner that should be visible at the top of the page. Look for one with the basic layout and/or colors you want in your custom theme, you can see the basic differences looking at the thumbnails;
2. Go to this excellent post by psychotic2 and find the theme you just picked, select all the CSS code and copy it to your Custom CSS page;
3. Then you can start changing it: alter the colors, borders, backgrounds, etc.

- What to change?

If you've selected the Custom Colors base theme, you don't need to copy the CSS since all the code with the changes you did to the colors will be already in your Custom CSS page with a bonus: most of the sections have comments about what they are, you just need to tweak it more to get what you need.
If you have no idea about the sections and selected another theme, you can look at the help at the Custom CSS page or look at this post for a basic guide. There are also some tutorials in the groups already about some changes that people usually request, they are also a good source of knowledge about the CSS section names (selectors), they use the general format:
selector {
%elements
}


- How to change?

To change a color, simply replace the code or name of the color you want to use. HTML color tables can be found here or here. You can use just a color name like black or red, or use a RGB color code starting with '#', for example: #000 or #00000 is the same as black. For no color at all (full transparency) use transparent, like this:
.itembox {
background-color: transparent;
}

You can change the color of borders, its thickness, type or simply remove them using:
boder:none like this:
.subnav {
border: none;
}

You can also change the backgrounds or images changing the URL of the image with the one you want to use. Remember that you must host the image on the Internet first, so images on your computer can't be used. You can host them right here on Multiply, see this tutorial. If you want to remove a background, you can use none, like this:
.railstart {
background: none;
}

The most common modifiers for the background when images are used are (look here for a full explanation):
body {
background-image: url(IMAGE_URL);
background-repeat: no-repeat/repeat/repeat-x/repeat-y;
background-attachment: fixed/scroll;
background-position: top/left/bottom/right/center;
}


If you cannot find the selector you want to change in the base theme CSS, try ones of these (there are the 'generic' CSS's that are loaded before the theme CSS):

http://multiply.com/style/site/
http://multiply.com/style/local/

That's the basic instructions. As soon as you get used to the basic functions and the names of the sections in the CSS you can try something more complicated. And the group is open to any questions about it. Enjoy!