{
    "title": "Intro Pattern",
    "label": "Intro Pattern",
    "description": "Use repeating image patterns to create interesting backgrounds and intro's.",
    "image": "crissXcross.png",
    "content": "Use patterns to create interesting intro's and backgrounds for your pages. Simply upload an image in gif\/png\/jpg format, and set the **source** in plugin. When using a repeating image pattern, you would normally set background size to `auto` so that the image repeats instead of scaling to full width.\n\nIf you want patterns to look extra sharp also on high-density retina screens, you should specify `background size` as half the size of the image file. For example, if the image is 200 x 200 px, you could set background size `100px 100px`.\n\n### A few pattern examples\n\n<div class=\"styled text-center\">\n<div class=x3-style-frame style=\"background-image:url({{path}}bright_squares.png);height:200px;margin-bottom:1em;padding:1em;\">bright_squares<\/div>\n<div class=x3-style-frame style=\"background-image:url({{path}}confectionary.png);height:200px;margin-bottom:1em;padding:1em;margin-bottom:1em;padding:1em;\">confectionary<\/div>\n<div class=x3-style-frame style=\"background-image:url({{path}}diamond_upholstery.png);height:200px;margin-bottom:1em;padding:1em;\">diamond_upholstery<\/div>\n<div class=x3-style-frame style=\"background-image:url({{path}}gplaypattern.png);height:200px;margin-bottom:1em;padding:1em;\">gplaypattern<\/div>\n<div class=x3-style-frame style=\"background-image:url({{path}}grey.png);height:200px;margin-bottom:1em;padding:1em;\">grey<\/div>\n<div class=x3-style-frame style=\"background-image:url({{path}}ignasi_pattern_s.png);height:200px;margin-bottom:1em;padding:1em;\">ignasi_pattern_s<\/div>\n<div class=x3-style-frame style=\"background-image:url({{path}}linedpaper.png);height:200px;margin-bottom:1em;padding:1em;\">linedpaper<\/div>\n<div class=x3-style-frame style=\"background-image:url({{path}}ps_neutral.png);height:200px;margin-bottom:1em;padding:1em;\">ps_neutral<\/div>\n<div class=x3-style-frame style=\"background-image:url({{path}}scribble_light.png);height:200px;margin-bottom:1em;padding:1em;\">scribble_light<\/div>\n<div class=x3-style-frame style=\"background-image:url({{path}}subtle_white_mini_waves.png);height:200px;margin-bottom:1em;padding:1em;\">subtle_white_mini_waves<\/div>\n<div class=x3-style-frame style=\"background-image:url({{path}}vichy.png);height:200px;margin-bottom:1em;padding:1em;\">vichy<\/div>\n<div class=x3-style-frame style=\"background-image:url({{path}}symphony.png);height:200px;margin-bottom:1em;padding:1em;\">symphony<\/div>\n<div class=x3-style-frame style=\"background-image:url({{path}}black_lozenge.png);height:200px;margin-bottom:1em;padding:1em;\">black_lozenge<\/div>\n<div class=x3-style-frame style=\"background-image:url({{path}}random_grey_variations.png);height:200px;margin-bottom:1em;padding:1em;\">random_grey_variations<\/div>\n<div class=x3-style-frame style=\"background-image:url({{path}}robots.png);height:200px;margin-bottom:1em;padding:1em;\">robots<\/div>\n<div class=x3-style-frame style=\"background-image:url({{path}}skulls.jpg);height:200px;margin-bottom:1em;padding:1em;\">skulls<\/div>\n<div class=x3-style-frame style=\"background-image:url({{path}}dark_embroidery.png);height:200px;margin-bottom:1em;padding:1em;\">dark_embroidery<\/div>\n<div class=x3-style-frame style=\"background-image:url({{path}}footer_lodyas.png);height:200px;margin-bottom:1em;padding:1em;\">footer_lodyas<\/div>\n<div class=x3-style-frame style=\"background-image:url({{path}}noisy_net.png);height:200px;margin-bottom:1em;padding:1em;\">noisy_net<\/div>\n<div class=x3-style-frame style=\"background-image:url({{path}}dark_stripes.png);height:200px;margin-bottom:1em;padding:1em;\">dark_stripes<\/div>\n<div class=x3-style-frame style=\"background-image:url({{path}}crissXcross.png);height:200px;margin-bottom:1em;padding:1em;\">crissXcross<\/div>\n<div class=x3-style-frame style=\"background-image:url({{path}}stressed_linen.png);height:200px;margin-bottom:1em;padding:1em;\">stressed_linen<\/div>\n<div class=x3-style-frame style=\"background-image:url({{path}}txture.png);height:200px;margin-bottom:1em;padding:1em;\">txture<\/div>\n<div class=x3-style-frame style=\"background-image:url({{path}}zwartevilt.png);height:200px;margin-bottom:1em;padding:1em;\">zwartevilt<\/div>\n<div class=x3-style-frame style=\"background-image:url({{path}}tactile_noise.png);height:200px;margin-bottom:1em;padding:1em;\">tactile_noise<\/div>\n<\/div>\n\n***Tip!** Patterns can also be used in the [intro-plugin](..\/intro-gradient\/)!*\n\n<h3 class=text-left>Pattern Resources<\/h3>\n<http:\/\/subtlepatterns.com>  \n<http:\/\/www.dinpattern.com\/category\/patterns>  \n<http:\/\/www.transparenttextures.com>",
    "gallery": {
        "hide": true
    },
    "plugins": {
        "image_background": {
            "enabled": true,
            "src": "type.png",
            "height": "60%",
            "size": "200px 200px",
            "fixed": true,
            "menu_style": "menu-absolute",
            "below_menu": false
        }
    }
}