{"id":961,"date":"2019-05-30T09:28:38","date_gmt":"2019-05-30T09:28:38","guid":{"rendered":"https:\/\/www.divigear.xyz\/dg-blog-module-design\/?page_id=961"},"modified":"2024-11-21T14:45:14","modified_gmt":"2024-11-21T08:45:14","slug":"10-masonry-background-image","status":"publish","type":"page","link":"https:\/\/plugins.divigear.net\/blog-module\/10-masonry-background-image\/","title":{"rendered":"10. Masonry \u2013 Background Image"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; custom_padding_last_edited=&#8221;on|phone&#8221; _builder_version=&#8221;4.16&#8243; background_color=&#8221;#4527a0&#8243; use_background_color_gradient=&#8221;on&#8221; background_color_gradient_stops=&#8221;rgba(69,39,160,0.93) 0%|rgba(69,39,160,0.92) 100%&#8221; background_color_gradient_overlays_image=&#8221;on&#8221; background_color_gradient_start=&#8221;rgba(69,39,160,0.93)&#8221; background_color_gradient_end=&#8221;rgba(69,39,160,0.92)&#8221; background_image=&#8221;https:\/\/plugins.divigear.net\/blog-module\/wp-content\/uploads\/sites\/3\/2019\/10\/2479918.jpg&#8221; custom_padding=&#8221;163px||60px||false|&#8221; custom_padding_tablet=&#8221;30px||||false|false&#8221; custom_padding_phone=&#8221;0px||||false|false&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.16&#8243; max_width=&#8221;1480px&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.27.0&#8243; text_font=&#8221;Montserrat|700||on|||||&#8221; text_text_color=&#8221;#ffffff&#8221; text_font_size=&#8221;70px&#8221; text_line_height=&#8221;2.1em&#8221; header_font=&#8221;Montserrat|700|||||||&#8221; header_text_align=&#8221;center&#8221; header_text_color=&#8221;#ffffff&#8221; header_font_size=&#8221;68px&#8221; header_2_font=&#8221;Black Ops One||||||||&#8221; text_orientation=&#8221;center&#8221; custom_margin=&#8221;||8px|||&#8221; header_font_size_tablet=&#8221;36px&#8221; header_font_size_phone=&#8221;26px&#8221; header_font_size_last_edited=&#8221;on|phone&#8221; text_text_shadow_style=&#8221;preset3&#8243; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h1>03. Masonry &#8211; IMAGE as<\/h1>\n<h1>BACKGROUND<\/h1>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.16&#8243; text_font=&#8221;Alegreya Sans|300|||||||&#8221; text_text_color=&#8221;#ffffff&#8221; text_font_size=&#8221;23px&#8221; text_line_height=&#8221;1.6em&#8221; header_font=&#8221;||||||||&#8221; header_2_font=&#8221;Fira Sans|700|||||||&#8221; header_2_text_color=&#8221;#ffffff&#8221; header_2_font_size=&#8221;66px&#8221; header_2_line_height=&#8221;1.2em&#8221; text_orientation=&#8221;center&#8221; max_width=&#8221;650px&#8221; module_alignment=&#8221;center&#8221; custom_margin=&#8221;||11px&#8221; global_colors_info=&#8221;{}&#8221;]You can download this design and use in your own project. Just click the button below and import the json file in divi library.[\/et_pb_text][et_pb_button button_url=&#8221;https:\/\/plugins.divigear.net\/blog-module\/wp-content\/uploads\/sites\/3\/2024\/11\/03_masonry_background_image.json&#8221; button_text=&#8221;Download the design&#8221; button_alignment=&#8221;center&#8221; module_class=&#8221;dg-download-button&#8221; _builder_version=&#8221;4.27.0&#8243; custom_button=&#8221;on&#8221; button_text_color=&#8221;#ffffff&#8221; button_bg_use_color_gradient=&#8221;on&#8221; button_bg_color_gradient_direction=&#8221;90deg&#8221; button_bg_color_gradient_stops=&#8221;#8300e9 0%|#3b008e 100%&#8221; button_bg_color_gradient_start=&#8221;#8300e9&#8243; button_bg_color_gradient_end=&#8221;#3b008e&#8221; button_border_color=&#8221;#ffffff&#8221; button_border_radius=&#8221;32px&#8221; button_letter_spacing=&#8221;0px&#8221; button_use_icon=&#8221;off&#8221; custom_margin=&#8221;48px||||false|false&#8221; custom_padding=&#8221;9px|57px|9px|57px|true|true&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;][\/et_pb_button][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.16&#8243; max_width=&#8221;1200px&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16&#8243; custom_padding=&#8221;|||&#8221; global_colors_info=&#8221;{}&#8221; custom_padding__hover=&#8221;|||&#8221;][dgbm_blog_module posts_number=&#8221;24&#8243; type=&#8221;3&#8243; include_categories=&#8221;5,11,9,3,8,7,6,10,4&#8243; show_thumbnail=&#8221;off&#8221; show_excerpt=&#8221;off&#8221; show_date=&#8221;off&#8221; show_more=&#8221;on&#8221; layout=&#8221;masonry&#8221; space_between=&#8221;20px&#8221; image_as_background=&#8221;on&#8221; image_size=&#8221;large&#8221; default_position_alignment=&#8221;center&#8221; button_alignment=&#8221;center&#8221; button_bg_color=&#8221;#1ebbf0&#8243; use_button_icon=&#8221;on&#8221; button_icon=&#8221;%%24%%&#8221; pagination_background=&#8221;#1ebbf0&#8243; content_padding=&#8221;96px|28px|58px|28px|false|true&#8221; title_margin=&#8221;||&#8221; button_padding=&#8221;12px|9px|10px|17px|false|false&#8221; pagination_padding=&#8221;6px|20px|6px|20px|true|true&#8221; author_background_color=&#8221;rgba(255,255,255,0)&#8221; date_background_color=&#8221;rgba(255,255,255,0)&#8221; category_background_color=&#8221;rgba(255,255,255,0)&#8221; date_padding=&#8221;2px|10px|2px|10px|true|true&#8221; space_between_tablet=&#8221;20px&#8221; space_between_phone=&#8221;10px&#8221; space_between_last_edited=&#8221;on|phone&#8221; _builder_version=&#8221;4.16&#8243; title_font=&#8221;Fira Sans|900|||||||&#8221; title_text_align=&#8221;center&#8221; title_text_color=&#8221;#ffffff&#8221; title_font_size=&#8221;34px&#8221; title_line_height=&#8221;1.2em&#8221; meta_font=&#8221;PT Serif||on||||||&#8221; meta_text_color=&#8221;rgba(0,0,0,0)&#8221; meta_font_size=&#8221;20px&#8221; meta_letter_spacing=&#8221;5px&#8221; content_font=&#8221;||||||||&#8221; content_text_color=&#8221;#ffffff&#8221; read_more_font=&#8221;Fira Sans|600||on|||||&#8221; read_more_text_color=&#8221;#ffffff&#8221; read_more_font_size=&#8221;18px&#8221; pagination_font=&#8221;|700|||||||&#8221; pagination_text_color=&#8221;#ffffff&#8221; pagination_font_size=&#8221;18px&#8221; author_font=&#8221;||||||||&#8221; date_font=&#8221;||||||||&#8221; category_font=&#8221;||||||||&#8221; use_background_color_gradient=&#8221;on&#8221; background_color_gradient_stops=&#8221;rgba(17,17,17,0.26) 0%|rgba(0,0,0,0.63) 100%&#8221; background_color_gradient_start=&#8221;rgba(17,17,17,0.26)&#8221; background_color_gradient_end=&#8221;rgba(0,0,0,0.63)&#8221; hover_transition_duration=&#8221;500ms&#8221; title_font_size_tablet=&#8221;&#8221; title_font_size_phone=&#8221;22px&#8221; title_font_size_last_edited=&#8221;on|phone&#8221; read_more_font_size_tablet=&#8221;&#8221; read_more_font_size_phone=&#8221;14px&#8221; read_more_font_size_last_edited=&#8221;on|phone&#8221; border_radii_pagination=&#8221;on|22px|22px|22px|22px&#8221; border_radii_date=&#8221;on|4px|4px|4px|4px&#8221; global_colors_info=&#8221;{}&#8221; date_background_color__hover=&#8221;rgba(255,255,255,0)&#8221; date_text_color__hover=&#8221;#ffffff&#8221; pagination_background__hover_enabled=&#8221;on&#8221; pagination_background__hover=&#8221;#e84a5f&#8221; read_more_text_color__hover_enabled=&#8221;on&#8221; read_more_text_color__hover=&#8221;#ffffff&#8221; title_margin__hover_enabled=&#8221;on&#8221; title_margin__hover=&#8221;-10px||10px&#8221; title_text_color__hover_enabled=&#8221;on&#8221; title_text_color__hover=&#8221;#ffffff&#8221; button_bg_color__hover_enabled=&#8221;on&#8221; button_bg_color__hover=&#8221;#1ebbf0&#8243; meta_text_color__hover_enabled=&#8221;on&#8221; meta_text_color__hover=&#8221;#ffffff&#8221; meta_default_margin__hover_enabled=&#8221;on&#8221; meta_default_margin__hover=&#8221;-10px||10px&#8221;][\/dgbm_blog_module][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>03. Masonry &#8211; IMAGE as BACKGROUNDYou can download this design and use in your own project. Just click the button below and import the json file in divi library.<div class=\"et_pb_module dgbm_blog_module dgbm_blog_module_0\">\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t<div class=\"et_pb_module_inner\">\n\t\t\t\t\t<div class=\"dg-blog-module\">\r\n\t\t\t\t\t\t\t<div class=\"dg-blog-inner-wrapper column-3 column-tablet-2 column-mobile-1 image-top\">\r\n\t\t\t\t\t\t\t\t<div class=\"et_pb_ajax_pagination_container\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"dg-blog-grid\" >                <article id=\"post-5203\" class=\"dgbm_post_item v2 post-5203 post type-post status-publish format-standard has-post-thumbnail hentry category-workspace\" >\r\n                                                                <div class=\"content-wrapper\">\r\n\t\t\t\t\t\t                             <h2 class=\"dg_bm_title\"><a href=\"https:\/\/plugins.divigear.net\/blog-module\/2024\/07\/16\/on-demand-courier-and-delivery-service\/\">On Demand Courier and Delivery Service<\/a><\/h2>                            <p class=\"post-meta post-meta-position-default\"><span class=\"author vcard\"><a href=\"https:\/\/plugins.divigear.net\/blog-module\/author\/divigear\/\" title=\"Posts by DiviGear\" rel=\"author\">DiviGear<\/a><\/span><span class=\"pipe-separator\">|<\/span><span class=\"categories\"> <a href=\"https:\/\/plugins.divigear.net\/blog-module\/category\/workspace\/\" rel=\"tag\">Workspace<\/a><\/span><\/p>                                                                                    \r\n                        <\/div>\r\n                                    <\/article>\r\n                                <article id=\"post-61\" class=\"dgbm_post_item v2 post-61 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized\" >\r\n                                                                <div class=\"content-wrapper\">\r\n\t\t\t\t\t\t                             <h2 class=\"dg_bm_title\"><a href=\"https:\/\/plugins.divigear.net\/blog-module\/2024\/07\/15\/seo-will-be-a-thing-of-the-past-and-heres-why\/\">Seo Will Be A Thing Of The Past And Here&#8217;s Why.<\/a><\/h2>                            <p class=\"post-meta post-meta-position-default\"><span class=\"author vcard\"><a href=\"https:\/\/plugins.divigear.net\/blog-module\/author\/divigear\/\" title=\"Posts by DiviGear\" rel=\"author\">DiviGear<\/a><\/span><span class=\"pipe-separator\">|<\/span><span class=\"categories\"> <a href=\"https:\/\/plugins.divigear.net\/blog-module\/category\/uncategorized\/\" rel=\"tag\">Uncategorized<\/a><\/span><\/p>                                                                                    \r\n                        <\/div>\r\n                                    <\/article>\r\n                                <article id=\"post-195\" class=\"dgbm_post_item v2 post-195 post type-post status-publish format-standard has-post-thumbnail hentry category-food\" >\r\n                                                                <div class=\"content-wrapper\">\r\n\t\t\t\t\t\t                             <h2 class=\"dg_bm_title\"><a href=\"https:\/\/plugins.divigear.net\/blog-module\/2024\/07\/14\/when-is-the-best-time-to-eat-fruit\/\">When is the best time to eat fruit?<\/a><\/h2>                            <p class=\"post-meta post-meta-position-default\"><span class=\"author vcard\"><a href=\"https:\/\/plugins.divigear.net\/blog-module\/author\/ulysses\/\" title=\"Posts by Ulysses S.\" rel=\"author\">Ulysses S.<\/a><\/span><span class=\"pipe-separator\">|<\/span><span class=\"categories\"> <a href=\"https:\/\/plugins.divigear.net\/blog-module\/category\/food\/\" rel=\"tag\">Food<\/a><\/span><\/p>                                                                                    \r\n                        <\/div>\r\n                                    <\/article>\r\n                                <article id=\"post-40\" class=\"dgbm_post_item v2 post-40 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized\" >\r\n                                                                <div class=\"content-wrapper\">\r\n\t\t\t\t\t\t                             <h2 class=\"dg_bm_title\"><a href=\"https:\/\/plugins.divigear.net\/blog-module\/2024\/07\/12\/ten-things-that-you-never-expect-on-marketing\/\">Ten Things That You Never Expect On Marketing.<\/a><\/h2>                            <p class=\"post-meta post-meta-position-default\"><span class=\"author vcard\"><a href=\"https:\/\/plugins.divigear.net\/blog-module\/author\/divigear\/\" title=\"Posts by DiviGear\" rel=\"author\">DiviGear<\/a><\/span><span class=\"pipe-separator\">|<\/span><span class=\"categories\"> <a href=\"https:\/\/plugins.divigear.net\/blog-module\/category\/uncategorized\/\" rel=\"tag\">Uncategorized<\/a><\/span><\/p>                                                                                    \r\n                        <\/div>\r\n                                    <\/article>\r\n                                <article id=\"post-48\" class=\"dgbm_post_item v2 post-48 post type-post status-publish format-standard has-post-thumbnail hentry category-business\" >\r\n                                                                <div class=\"content-wrapper\">\r\n\t\t\t\t\t\t                             <h2 class=\"dg_bm_title\"><a href=\"https:\/\/plugins.divigear.net\/blog-module\/2024\/07\/12\/why-business-had-been-so-popular-till-now\/\">Why Business Had Been So Popular Till Now?<\/a><\/h2>                            <p class=\"post-meta post-meta-position-default\"><span class=\"author vcard\"><a href=\"https:\/\/plugins.divigear.net\/blog-module\/author\/divigear\/\" title=\"Posts by DiviGear\" rel=\"author\">DiviGear<\/a><\/span><span class=\"pipe-separator\">|<\/span><span class=\"categories\"> <a href=\"https:\/\/plugins.divigear.net\/blog-module\/category\/business\/\" rel=\"tag\">Business<\/a><\/span><\/p>                                                                                    \r\n                        <\/div>\r\n                                    <\/article>\r\n                                <article id=\"post-170\" class=\"dgbm_post_item v2 post-170 post type-post status-publish format-standard has-post-thumbnail hentry category-entertainment\" >\r\n                                                                <div class=\"content-wrapper\">\r\n\t\t\t\t\t\t                             <h2 class=\"dg_bm_title\"><a href=\"https:\/\/plugins.divigear.net\/blog-module\/2024\/07\/11\/supreme-mathematics-movie-review\/\">Supreme Mathematics Movie Review<\/a><\/h2>                            <p class=\"post-meta post-meta-position-default\"><span class=\"author vcard\"><a href=\"https:\/\/plugins.divigear.net\/blog-module\/author\/mcmeans\/\" title=\"Posts by McMeans\" rel=\"author\">McMeans<\/a><\/span><span class=\"pipe-separator\">|<\/span><span class=\"categories\"> <a href=\"https:\/\/plugins.divigear.net\/blog-module\/category\/entertainment\/\" rel=\"tag\">Entertainment<\/a><\/span><\/p>                                                                                    \r\n                        <\/div>\r\n                                    <\/article>\r\n                                <article id=\"post-63\" class=\"dgbm_post_item v2 post-63 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized\" >\r\n                                                                <div class=\"content-wrapper\">\r\n\t\t\t\t\t\t                             <h2 class=\"dg_bm_title\"><a href=\"https:\/\/plugins.divigear.net\/blog-module\/2024\/07\/10\/the-rank-of-blog-writing-in-consumers-market\/\">The Rank Of Blog Writing In Consumer&#8217;s Market.<\/a><\/h2>                            <p class=\"post-meta post-meta-position-default\"><span class=\"author vcard\"><a href=\"https:\/\/plugins.divigear.net\/blog-module\/author\/divigear\/\" title=\"Posts by DiviGear\" rel=\"author\">DiviGear<\/a><\/span><span class=\"pipe-separator\">|<\/span><span class=\"categories\"> <a href=\"https:\/\/plugins.divigear.net\/blog-module\/category\/uncategorized\/\" rel=\"tag\">Uncategorized<\/a><\/span><\/p>                                                                                    \r\n                        <\/div>\r\n                                    <\/article>\r\n                                <article id=\"post-211\" class=\"dgbm_post_item v2 post-211 post type-post status-publish format-standard has-post-thumbnail hentry category-sports\" >\r\n                                                                <div class=\"content-wrapper\">\r\n\t\t\t\t\t\t                             <h2 class=\"dg_bm_title\"><a href=\"https:\/\/plugins.divigear.net\/blog-module\/2024\/07\/08\/how-to-collect-a-basketball-coin-and-shoe-in-a-single-match\/\">How to collect a basketball, coin, and shoe in a single match<\/a><\/h2>                            <p class=\"post-meta post-meta-position-default\"><span class=\"author vcard\"><a href=\"https:\/\/plugins.divigear.net\/blog-module\/author\/ulysses\/\" title=\"Posts by Ulysses S.\" rel=\"author\">Ulysses S.<\/a><\/span><span class=\"pipe-separator\">|<\/span><span class=\"categories\"> <a href=\"https:\/\/plugins.divigear.net\/blog-module\/category\/sports\/\" rel=\"tag\">Sports<\/a><\/span><\/p>                                                                                    \r\n                        <\/div>\r\n                                    <\/article>\r\n                                <article id=\"post-119\" class=\"dgbm_post_item v2 post-119 post type-post status-publish format-standard has-post-thumbnail hentry category-travel\" >\r\n                                                                <div class=\"content-wrapper\">\r\n\t\t\t\t\t\t                             <h2 class=\"dg_bm_title\"><a href=\"https:\/\/plugins.divigear.net\/blog-module\/2024\/07\/07\/a-complete-tour-guide-to-hill-station\/\">A Complete Tour Guide To Hill Station<\/a><\/h2>                            <p class=\"post-meta post-meta-position-default\"><span class=\"author vcard\"><a href=\"https:\/\/plugins.divigear.net\/blog-module\/author\/nancy\/\" title=\"Posts by Nancy D.\" rel=\"author\">Nancy D.<\/a><\/span><span class=\"pipe-separator\">|<\/span><span class=\"categories\"> <a href=\"https:\/\/plugins.divigear.net\/blog-module\/category\/travel\/\" rel=\"tag\">Travel<\/a><\/span><\/p>                                                                                    \r\n                        <\/div>\r\n                                    <\/article>\r\n                                <article id=\"post-167\" class=\"dgbm_post_item v2 post-167 post type-post status-publish format-standard has-post-thumbnail hentry category-entertainment\" >\r\n                                                                <div class=\"content-wrapper\">\r\n\t\t\t\t\t\t                             <h2 class=\"dg_bm_title\"><a href=\"https:\/\/plugins.divigear.net\/blog-module\/2024\/07\/06\/inception-2010-movie-plot-ending-explained-this-is-barry\/\">Inception (2010) : Movie Plot Ending Explained &#8211; This is Barry<\/a><\/h2>                            <p class=\"post-meta post-meta-position-default\"><span class=\"author vcard\"><a href=\"https:\/\/plugins.divigear.net\/blog-module\/author\/mcmeans\/\" title=\"Posts by McMeans\" rel=\"author\">McMeans<\/a><\/span><span class=\"pipe-separator\">|<\/span><span class=\"categories\"> <a href=\"https:\/\/plugins.divigear.net\/blog-module\/category\/entertainment\/\" rel=\"tag\">Entertainment<\/a><\/span><\/p>                                                                                    \r\n                        <\/div>\r\n                                    <\/article>\r\n                <\/div><div class=\"pagination clearfix\">\n\t<div class=\"alignleft\"><a href=\"https:\/\/plugins.divigear.net\/blog-module\/wp-json\/wp\/v2\/pages\/961\/page\/2\/?et_blog\" >&laquo; Older Entries<\/a><\/div>\n\t<div class=\"alignright\"><\/div>\n<\/div> \r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n                        <\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"difl_page_category":[],"acf":[],"_links":{"self":[{"href":"https:\/\/plugins.divigear.net\/blog-module\/wp-json\/wp\/v2\/pages\/961"}],"collection":[{"href":"https:\/\/plugins.divigear.net\/blog-module\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/plugins.divigear.net\/blog-module\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/plugins.divigear.net\/blog-module\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/plugins.divigear.net\/blog-module\/wp-json\/wp\/v2\/comments?post=961"}],"version-history":[{"count":8,"href":"https:\/\/plugins.divigear.net\/blog-module\/wp-json\/wp\/v2\/pages\/961\/revisions"}],"predecessor-version":[{"id":6222,"href":"https:\/\/plugins.divigear.net\/blog-module\/wp-json\/wp\/v2\/pages\/961\/revisions\/6222"}],"wp:attachment":[{"href":"https:\/\/plugins.divigear.net\/blog-module\/wp-json\/wp\/v2\/media?parent=961"}],"wp:term":[{"taxonomy":"difl_page_category","embeddable":true,"href":"https:\/\/plugins.divigear.net\/blog-module\/wp-json\/wp\/v2\/difl_page_category?post=961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}