Fixed-Height Repeating Stripe Pattern

How to use a repeating stripe pattern as the background image for a fixed-height DIV? Let’s take the stripe image below as an example.

Step 1
Open the image in photoshop, duplicate the layer so that you now have 2 layers of yellow stripes.

Choose the new duplicated layer, use your keyboard right arrow key to move the layer to the right, pixels by pixels (as shown below)

Step 2
Keep moving it to the right until you saw the images “combined” – same as the original image. Now hold your Ctrl key and click on the duplicated layer’s thumbnail to select its path.

Step 3
Now hide the duplicated layer by clicking on the layer visibility area (the “eye”). Next, choose the original stripe layer and press Delete to delete a part of the image in the selection.

Step 4
Use the Crop Tool to select the remaining part of the original layer, right click and select Crop. You can now save it as the background image of the DIV and set it to repeat-x in css.

.stripe {
background-image:url(stripe.gif);
background-repeat:repeat-x;
}

Live Demo

The DIV above uses this image as background.

Fluid-Height Repeating Stripe Pattern

How to use a repeating stripe pattern as the background image for a DIV which is not fixed in height? This will be covered in the next part of this tutorial.

Env1ro

The first pack consists of 13 brushes of average 400-500 pixels big. It contains some alphabets such as X, S and V, etc.

Brush Details & Download | Author

Brushes of average 650 pixels. It contains shapes and symbol such as bubble, circle, sun, etc. with halftone pattern.
Brush Details & Download | Author

The third pack has high resolution brushes as they are really big. All of them are 2500 pixels which is the maximum size for brushes. Suitable for big design.
Brush Details & Download | Author

jstoltz

Average size 600 – 700 pixels. All brushes have small circles.
Brush Details & Download | Author

revn89

Consists of mostly small brushes of shapes like circle, star, heart, etc. Special thing about this brush pack? The big & great halftone gradient.
Brush Details & Download | Author

ohgalore

It has brushes to make halftone border. Maximum size of 500 pixels.
Brush Details & Download | Author

Redheadstock

Really big brushes with awesome shapes.
Brush Details & Download | Author

Renacido

Brush Details & Download | Author

Stockgraphicdesigns.com

An uncommon halftone brush pack because the circles were replaced by other shapes like hearts, stars, water drops, etc.
Brush Details & Download | Author

Szuia

Brushes to make halftone corner and side (border).
Brush Details & Download | Author

Faeth-Design

Contains custom shapes like stars, heart, circle, etc.
Brush Details & Download | Author

Author : Joanne Taylor
Type : Freeware
Downloads available : Windows TrueType only

Indie Star BB

Author : Blambot
Type : Freeware
Downloads available : Windows TrueType, Mac TrueType, Mac PostScript

lazyday

Author : Billy Argel
Type : Demoware
Downloads available : Windows TrueType only

Starguide

Author : Luciana Morin
Type : Freeware
Downloads available : Windows TrueType only

10 cent soviet

Author : Blambot
Type : Freeware
Downloads available : Windows TrueType, Mac TrueType, Mac PostScript

Warmonger BB

Author : Blambot
Type : Freeware
Downloads available : Windows TrueType, Mac TrueType, Mac PostScript

Village Idiot

Author : Blambot
Type : Freeware
Downloads available : Windows TrueType, Mac TrueType, Mac PostScript

Creative Block BB

Author : Blambot
Type : Freeware
Downloads available : Windows TrueType, Mac TrueType, Mac PostScript

Fat Stack

Author : Blambot
Type : Freeware
Downloads available : Windows TrueType, Mac TrueType, Mac PostScript

PizzaBot

Author : pizzadude
Type : Demoware
Downloads available : Windows TrueType only

OilBats-Basic 0.5 beta

Author : dibujado
Type : Freeware
Downloads available : Windows TrueType, Windows PostScript

Mail Ray Stuff 1.0

Author : Ray Larabie
Type : Freeware
Downloads available : Windows TrueType, Mac PostScript

Fancy footwork 2

Author : pizzadude
Type : Freeware
Downloads available : Windows TrueType, Mac TrueType

Betty Noir

Author : Blambot
Type : Freeware
Downloads available : Windows TrueType, Mac TrueType, Mac PostScript

Yoshitoshi

Author : Blambot
Type : Freeware
Downloads available : Windows TrueType, Mac TrueType, Mac PostScript

Twelve Ton Goldfish

Author : Blambot
Type : Freeware
Downloads available : Windows TrueType, Mac TrueType, Mac PostScript

Umberto

Author : Blambot
Type : Freeware
Downloads available : Windows TrueType, Mac TrueType, Mac PostScript

Massive Headache 3

Author : pizzadude
Type : Freeware
Downloads available : Windows TrueType, Mac TrueType

Twelve Ton Sushi

Author : Blambot
Type : Freeware
Downloads available : Windows TrueType, Mac TrueType, Mac PostScript

Munster Bash 2

Author : pizzadude
Type : Freeware
Downloads available : Windows TrueType, Mac TrueType

MilkCocoa

Author : sRB-Powers
Type : Freeware
Downloads available : Windows TrueType only

AnimeAce

Author : Blambot
Type : Freeware
Downloads available : Windows TrueType, Mac TrueType, Mac PostScript

Space Pointiff

Author : Blambot
Type : Freeware
Downloads available : Windows TrueType, Mac TrueType, Mac PostScript

Hypmotizin 1.0

Author : Rich Gast
Type : Freeware
Downloads available : Windows TrueType, Mac TrueType

In case you can’t find the solution using the correct keywords (through web search), here’s the rewritten guide from that website.

The Guide

1. Loading an IE-Only CSS Stylesheet

We need to load another stylesheet if the visitor is using Internet Explorer. In this example, I call it ie.css. Paste these codes before </head> tag.

<!--[if IE]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

2. Tells MSIE to Load a Behaviour File

Open up ie.css and paste the following codes into it.

img, .pngfix {
	behavior: url("iepngfix.htc");
}

You can assign the behaviour to more elements by using comma. For example :

img, .pngfix, div, p {
	behavior: url("iepngfix.htc");
}

3. Get the Behaviour File & Blank.gif

Download & Save

The behaviour file | blank.gif

Save them to your folder. If you want to put the blank.gif into another folder, make sure you edit the path in iepngfix.htc

4. How to use it?

Everything is kinda automatic now, depends on which element you assign the behaviour to.

An example based on the css above :

<div class="pngfix" style="background-image:url(images/SEE_I_HAVE_PNG_AS_BACKGROUND.png);">
..content..
</div>

I assigned a class called “pngfix” to the div that has PNG image as background.

5. Side Notes

I placed blank.gif in a folder called “images” and of course I would have to edit the htc file. However, I used “images/blank.gif” instead of “/images/blank.gif” as suggested by the author because it doesn’t work (at least for me).

6. I got an javascript alert – IEPNGFix: Children of positioned element are unclickable:…

Most probably the element that uses PNG as background-image has its CSS position set. In my case, my div has position:relative and it throws this alert to me.

How do I fix it? I created another div inside the div with PNG image as background-image and apply position:relative to the inner div.

<div id="DIV_WITH_PNG_BACKGROUND" class="pngfix">
<div class="the_fix" style="position:relative;">
</div>
</div>

To avoid the alert, you have to remove any CSS position if your div uses PNG image as background.
Note that the position:relative was given to the inner div instead of the outer.

The Great Coder

All credits to Angus Turnbull.

1. A container that hold the images to be preloaded

The HTML :

....
<body>
<div class="preload">
<img src="IMAGE_TO_PRELOAD_1" />
<img src="IMAGE_TO_PRELOAD_2" />
<img src="IMAGE_TO_PRELOAD_3" />
</div>
...
...

The CSS:

.preload {
position:absolute;
top:0px;
left:0px;
width:1px;
height:1px;
visibility:hidden;
overflow:hidden;
}

EXPLAINATION

• We place the container after <body> and assign an absolute position to it because usually there will not be anything at that position.
• We make the container 1 pixel width and height so that visitors cannot see it.
• Besides, we need to set its overflow to hidden so that the overflow wouldn’t be visible.
• Lastly, change its visibility to hidden so that the container is invisible (but it is still there and most importantly it loads)

2. Demo & Rollover Code

Demo:

The Code:

<div style="position:absolute;top:0px;left:0px;width:1px;height:1px;visibility:hidden;overflow:hidden;">
<img src="http://zenverse.net/wp-content/uploads/2009/06/csshover_2.jpg" /></div>
 
<img src="http://zenverse.net/wp-content/uploads/2009/06/csshover_1.jpg" onmouseout="this.src='http://zenverse.net/wp-content/uploads/2009/06/csshover_1.jpg'" onmouseover="this.src='http://zenverse.net/wp-content/uploads/2009/06/csshover_2.jpg'" />

Sample

Jump straight to Download (PSD)

Step-by-step Guide

1. Make a triangle

Make a triangle facing downward using Polygon Tools. I am using this:

Now, select the triangle layer and press Ctrl + T to do a free transform. Increase its width to 250% using the menu on top.

Result:

2. Make a rectangle as the floor tile’s thickness

Now, make a rectangle using Rectangle Tool. Make sure your rectangle is not too thick and has the same width as the triangle.
Put the rectangle just on top of the triangle.

Result:

3. Completes the shape of floor tile

Duplicate the triangle’s layer (from step 1) and flip it vertically. Put it just on top of the rectangle and we need to distort it now.

• Select the new triangle’s layer
• Press Ctrl + T
• Right Click on the triangle
• Choose Distort
• Set its height to 67%

Now, of course, move it down and put it just on top of the rectangle.

Result:

4. Merge the layers

You might want to duplicate the layers (as backup) before merging the 3 layers.

Now merge them and apply layer effect to it as follow.

Color Overlay
- All default settings except changing the colour to White

Stroke
- All default settings except changing the colour to 727272
- This is a 3 pixels border, change it as you wish

5. Make it 3D

Use Polygonal Lasso Tool to make a selection that look like this:

Now fill it with black colour and set its opacity to 14%.

Make another one as in the picture below:

Now fill it with black colour and set its opacity to 8%.

Play around with their opacity until you are satisfied.

Result:

6. It’s done. Now decorate your own piece of floor tile.

Here’s some floor tiles I’ve made earlier.

Download the PSD

Flash-like Floor Tile (PSD)
[ Downloaded 100 times | 20.07 KB ]

Thank you for reading

Let’s start

1. Design your own search box

In this example, I will use this as my search box.

2. Crop it out

Make sure the background color outside the search box is the same as your design. Now crop the whole search box out.

result:

3. Create a blank image as submit button

The picture above explained all.

4. HTML codes for the search box

<div id="searchwrapper"><form action="">
<input type="text" class="searchbox" name="s" value="" />
<input type="image" src="THE_BLANK_SUBMIT_BUTTON_IMAGE" class="searchbox_submit" value="" />
</form>
</div>

Replace the “THE_BLANK_SUBMIT_BUTTON_IMAGE” with the image at step 3.

5. CSS codes for my search box

#searchwrapper {
width:310px; /*follow your image's size*/
height:40px;/*follow your image's size*/
background-image:url(THE_SEARCH_BOX_IMAGE);
background-repeat:no-repeat; /*important*/
padding:0px;
margin:0px;
position:relative; /*important*/
}
 
#searchwrapper form { display:inline ; }
 
.searchbox {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:4px;
left:9px;
width:256px;
height:28px;
}
 
.searchbox_submit {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:4px;
left:265px;
width:32px;
height:28px;
}

Basically what’s going on :
#searchwrapper wrap the whole search box, carrying the whole search box image as its background image.
.searchbox is the text area to enter search keyword, given a transparent background and no border.
.searchbox_submit is the submit button, also given a transparent background and no border.

NOTE:
Both .searchbox and .searchbox_submit have been given an absolute position, you should modify their position, width and height according to your own search box.

That’s it.

Feel free to reply here