1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="utf-8 ">
5+ < title > Subtle Pattern Demo</ title >
6+ < style >
7+ body , html { padding : 0 ;margin : 0 ;height : 100% ; }
8+ body { background : # ccc none repeat 0 0 ; }
9+ form { padding : 10px ;text-align : center;background : # FFF ;border-bottom : 1px solid # 000 ; }
10+ </ style >
11+ </ head >
12+ < body >
13+ < form >
14+ < select id ="image ">
15+ < option > 45degreee_fabric.png</ option >
16+ < option > 60degree_gray.png</ option >
17+ < option > absurdidad.png</ option >
18+ < option > always_grey.png</ option >
19+ < option > arab_tile.png</ option >
20+ < option > arches.png</ option >
21+ < option > argyle.png</ option >
22+ < option > asfalt.png</ option >
23+ < option > assault.png</ option >
24+ < option > back_pattern.png</ option >
25+ < option > batthern.png</ option >
26+ < option > beige_paper.png</ option >
27+ < option > bgnoise_lg.png</ option >
28+ < option > black-Linen.png</ option >
29+ < option > blackmamba.png</ option >
30+ < option > black_denim.png</ option >
31+ < option > black_linen_v2.png</ option >
32+ < option > black_mamba.png</ option >
33+ < option > black_paper.png</ option >
34+ < option > black_scales.png</ option >
35+ < option > black_thread.png</ option >
36+ < option > black_twill.png</ option >
37+ < option > blizzard.png</ option >
38+ < option > blu_stripes.png</ option >
39+ < option > bo_play_pattern.png</ option >
40+ < option > bright_squares.png</ option >
41+ < option > brillant.png</ option >
42+ < option > broken_noise.png</ option >
43+ < option > brushed_alu.png</ option >
44+ < option > brushed_alu_dark.png</ option >
45+ < option > burried.png</ option >
46+ < option > candyhole.png</ option >
47+ < option > carbon_fibre.png</ option >
48+ < option > carbon_fibre_big.png</ option >
49+ < option > carbon_fibre_v2.png</ option >
50+ < option > cardboard.png</ option >
51+ < option > cardboard_1.png</ option >
52+ < option > cardboard_flat.png</ option >
53+ < option > cartographer.png</ option >
54+ < option > checkered_pattern.png</ option >
55+ < option > chruch.png</ option >
56+ < option > circles.png</ option >
57+ < option > classy_fabric.png</ option >
58+ < option > clean_textile.png</ option >
59+ < option > climpek.png</ option >
60+ < option > concrete_wall.png</ option >
61+ < option > concrete_wall_2.png</ option >
62+ < option > concrete_wall_3.png</ option >
63+ < option > connect.png</ option >
64+ < option > cork_1.png</ option >
65+ < option > corrugation.png</ option >
66+ < option > cracks_1.png</ option >
67+ < option > crisp_paper_ruffles.png</ option >
68+ < option > crissXcross.png</ option >
69+ < option > crossed_stripes.png</ option >
70+ < option > crosses.png</ option >
71+ < option > cross_scratches.png</ option >
72+ < option > cubes.png</ option >
73+ < option > cutcube.png</ option >
74+ < option > daimond_eyes.png</ option >
75+ < option > darkdenim3.png</ option >
76+ < option > dark_brick_wall.png</ option >
77+ < option > dark_circles.png</ option >
78+ < option > dark_dotted.png</ option >
79+ < option > dark_geometric.png</ option >
80+ < option > dark_leather.png</ option >
81+ < option > dark_matter.png</ option >
82+ < option > dark_mosaic.png</ option >
83+ < option > dark_stripes.png</ option >
84+ < option > dark_Tire.png</ option >
85+ < option > dark_wall.png</ option >
86+ < option > dark_wood.png</ option >
87+ < option > darth_stripe.png</ option >
88+ < option > denim.png</ option >
89+ < option > diagmonds.png</ option >
90+ < option > diagonal-noise.png</ option >
91+ < option > diagonal_striped_brick.png</ option >
92+ < option > diamonds.png</ option >
93+ < option > diamond_upholstery.png</ option >
94+ < option > dirty_old_shirt.png</ option >
95+ < option > double_lined.png</ option >
96+ < option > dust.png</ option >
97+ < option > dvsup.png</ option >
98+ < option > egg_shell.png</ option >
99+ < option > elastoplast.png</ option >
100+ < option > elegant_grid.png</ option >
101+ < option > embossed_paper.png</ option >
102+ < option > escheresque.png</ option >
103+ < option > exclusive_paper.png</ option >
104+ < option > extra_clean_paper.png</ option >
105+ < option > fabric_1.png</ option >
106+ < option > fabric_plaid.png</ option >
107+ < option > fake_brick.png</ option >
108+ < option > fake_luxury.png</ option >
109+ < option > fancy_deboss.png</ option >
110+ < option > farmer.png</ option >
111+ < option > felt.png</ option >
112+ < option > first_aid_kit.png</ option >
113+ < option > flowers.png</ option >
114+ < option > flowertrail.png</ option >
115+ < option > foggy_birds.png</ option >
116+ < option > foil.png</ option >
117+ < option > frenchstucco.png</ option >
118+ < option > furley_bg.png</ option >
119+ < option > gold_scale.png</ option >
120+ < option > gplaypattern.png</ option >
121+ < option > gradient_squares.png</ option >
122+ < option > graphy.png</ option >
123+ < option > gray_sand.png</ option >
124+ < option > green-fibers.png</ option >
125+ < option > green_dust_scratch.png</ option >
126+ < option > green_gobbler.png</ option >
127+ < option > grey.png</ option >
128+ < option > greyfloral.png</ option >
129+ < option > grey_sandbag.png</ option >
130+ < option > grid.png</ option >
131+ < option > gridme.png</ option >
132+ < option > grid_noise.png</ option >
133+ < option > grilled.png</ option >
134+ < option > groovepaper.png</ option >
135+ < option > grunge_wall.png</ option >
136+ < option > gun_metal.png</ option >
137+ < option > handmadepaper.png</ option >
138+ < option > hexabump.png</ option >
139+ < option > hexellence.png</ option >
140+ < option > hixs_pattern_evolution.png</ option >
141+ < option > husk.png</ option >
142+ < option > ice_age.png</ option >
143+ < option > inflicted.png</ option >
144+ < option > irongrip.png</ option >
145+ < option > knitted-netting.png</ option >
146+ < option > kuji.png</ option >
147+ < option > large_leather.png</ option >
148+ < option > leather_1.png</ option >
149+ < option > lghtmesh.png</ option >
150+ < option > lightpaperfibers.png</ option >
151+ < option > light_alu.png</ option >
152+ < option > light_checkered_tiles.png</ option >
153+ < option > light_grey_floral_motif.png</ option >
154+ < option > light_honeycomb.png</ option >
155+ < option > light_noise_diagonal.png</ option >
156+ < option > light_toast.png</ option >
157+ < option > light_wool.png</ option >
158+ < option > lil_fiber.png</ option >
159+ < option > lined_paper.png</ option >
160+ < option > linen.png</ option >
161+ < option > littleknobs.png</ option >
162+ < option > little_pluses.png</ option >
163+ < option > little_triangles.png</ option >
164+ < option > low_contrast_linen.png</ option >
165+ < option > lyonnette.png</ option >
166+ < option > merely_cubed.png</ option >
167+ < option > micro_carbon.png</ option >
168+ < option > mirrored_squares.png</ option >
169+ < option > nami.png</ option >
170+ < option > natural_paper.png</ option >
171+ < option > nistri.png</ option >
172+ < option > noise_lines.png</ option >
173+ < option > noise_pattern_with_crosslines.png</ option >
174+ < option > noisy.png</ option >
175+ < option > noisy_grid.png</ option >
176+ < option > norwegian_rose.png</ option >
177+ < option > office.png</ option >
178+ < option > old_mathematics.png</ option >
179+ < option > old_wall.png</ option >
180+ < option > outlets.png</ option >
181+ < option > padded.png</ option >
182+ < option > paper.png</ option >
183+ < option > paper_1.png</ option >
184+ < option > paper_2.png</ option >
185+ < option > paper_3.png</ option >
186+ < option > paven.png</ option >
187+ < option > perforated_white_leather.png</ option >
188+ < option > pineapplecut.png</ option >
189+ < option > pinstripe.png</ option >
190+ < option > pinstriped_suit.png</ option >
191+ < option > plaid.png</ option >
192+ < option > polaroid.png</ option >
193+ < option > polonez_car.png</ option >
194+ < option > polyester_lite.png</ option >
195+ < option > pool_table.png</ option >
196+ < option > project_papper.png</ option >
197+ < option > psychedelic_pattern.png</ option >
198+ < option > purty_wood.png</ option >
199+ < option > px_by_Gre3g.png</ option >
200+ < option > pyramid.png</ option >
201+ < option > quilt.png</ option >
202+ < option > random_grey_variations.png</ option >
203+ < option > ravenna.png</ option >
204+ < option > real_cf.png</ option >
205+ < option > rebel.png</ option >
206+ < option > redox_01.png</ option >
207+ < option > redox_02.png</ option >
208+ < option > reticular_tissue.png</ option >
209+ < option > retina_wood.png</ option >
210+ < option > retro_intro.png</ option >
211+ < option > ricepaper.png</ option >
212+ < option > ricepaper2.png</ option >
213+ < option > rip_jobs.png</ option >
214+ < option > robots.png</ option >
215+ < option > rockywall.png</ option >
216+ < option > roughcloth.png</ option >
217+ < option > rough_diagonal.png</ option >
218+ < option > rubber_grip.png</ option >
219+ < option > scribble_light.png</ option >
220+ < option > shattered.png</ option >
221+ < option > shinecaro.png</ option >
222+ < option > shinedotted.png</ option >
223+ < option > silver_scales.png</ option >
224+ < option > skelatal_weave.png</ option >
225+ < option > skewed_print.png</ option >
226+ < option > skin_side_up.png</ option >
227+ < option > small-crackle-bright.png</ option >
228+ < option > small_tiles.png</ option >
229+ < option > smooth_wall.png</ option >
230+ < option > snow.png</ option >
231+ < option > soft_circle_scales.png</ option >
232+ < option > soft_kill.png</ option >
233+ < option > soft_pad.png</ option >
234+ < option > soft_wallpaper.png</ option >
235+ < option > solid.png</ option >
236+ < option > squares.png</ option >
237+ < option > square_bg.png</ option >
238+ < option > stacked_circles.png</ option >
239+ < option > starring.png</ option >
240+ < option > stitched_wool.png</ option >
241+ < option > strange_bullseyes.png</ option >
242+ < option > straws.png</ option >
243+ < option > striped_lens.png</ option >
244+ < option > struckaxiom.png</ option >
245+ < option > stucco.png</ option >
246+ < option > subtlenet2.png</ option >
247+ < option > subtle_carbon.png</ option >
248+ < option > subtle_dots.png</ option >
249+ < option > subtle_freckles.png</ option >
250+ < option > subtle_orange_emboss.png</ option >
251+ < option > subtle_stripes.png</ option >
252+ < option > subtle_surface.png</ option >
253+ < option > subtle_zebra_3d.png</ option >
254+ < option > swirl.png</ option >
255+ < option > tactile_noise.png</ option >
256+ < option > tapestry_pattern.png</ option >
257+ < option > tasky_pattern.png</ option >
258+ < option > tex2res1.png</ option >
259+ < option > tex2res2.png</ option >
260+ < option > tex2res3.png</ option >
261+ < option > tex2res4.png</ option >
262+ < option > tex2res5.png</ option >
263+ < option > textured_stripes.png</ option >
264+ < option > texturetastic_gray.png</ option >
265+ < option > tileable_wood_texture.png</ option >
266+ < option > tiny_grid.png</ option >
267+ < option > triangles.png</ option >
268+ < option > triangles_pattern.png</ option >
269+ < option > txture.png</ option >
270+ < option > type.png</ option >
271+ < option > use_your_illusion.png</ option >
272+ < option > vaio_hard_edge.png</ option >
273+ < option > vertical_cloth.png</ option >
274+ < option > vichy.png</ option >
275+ < option > vintage_speckles.png</ option >
276+ < option > wall4.png</ option >
277+ < option > washi.png</ option >
278+ < option > wavecut.png</ option >
279+ < option > weave.png</ option >
280+ < option > whitediamond.png</ option >
281+ < option > whitey.png</ option >
282+ < option > white_bed_sheet.png</ option >
283+ < option > white_brick_wall.png</ option >
284+ < option > white_carbon.png</ option >
285+ < option > white_carbonfiber.png</ option >
286+ < option > white_leather.png</ option >
287+ < option > white_paperboard.png</ option >
288+ < option > white_plaster.png</ option >
289+ < option > white_sand.png</ option >
290+ < option > white_texture.png</ option >
291+ < option > white_tiles.png</ option >
292+ < option > white_wall.png</ option >
293+ < option > white_wave.png</ option >
294+ < option > wide_rectangles.png</ option >
295+ < option > wood_1.jpg</ option >
296+ < option > wood_1.png</ option >
297+ < option > wood_pattern.png</ option >
298+ < option > worn_dots.png</ option >
299+ < option > woven.png</ option >
300+ < option > xv.png</ option >
301+ < option > zigzag.png</ option >
302+ </ select >
303+ </ form >
304+
305+ < script src ="http://code.jquery.com/jquery.min.js "> </ script >
306+ < script >
307+ $ ( document ) . ready ( function ( ) {
308+
309+ $ ( '#image' )
310+ . bind ( 'keyup change unfocus blur' , function ( ) {
311+ $ ( 'body' ) . css ( 'background-image' , 'url(' + $ ( this ) . val ( ) + ')' ) ;
312+ } )
313+ . blur ( ) ;
314+
315+ } ) ;
316+ </ script >
317+ </ body >
318+ </ html >
0 commit comments