{"id":20360,"date":"2021-07-12T00:58:45","date_gmt":"2021-07-12T05:58:45","guid":{"rendered":"https:\/\/wpstackable.com\/?page_id=20360"},"modified":"2022-03-26T04:45:36","modified_gmt":"2022-03-26T09:45:36","slug":"learn-image-settings-video","status":"publish","type":"page","link":"https:\/\/wpstackable.com\/learn-image-settings-video\/","title":{"rendered":"Learn &#8211; Image Settings Video"},"content":{"rendered":"\n<div class=\"wp-block-ugb-text ugb-text ugb-49cb3b9 ugb-text--design-plain ugb-text--columns-1 ugb-text--subtitle-top ugb-main-block\"><style>.ugb-49cb3b9 .ugb-text__title{color:var(u002du002dstk-global-color-43441,#111111);font-size:48px !important}.ugb-49cb3b9 .ugb-text__subtitle{font-size:14px !important;letter-spacing:0.5px !important;color:var(u002du002dstk-global-color-43441,#111111)}.ugb-49cb3b9 .ugb-text__text p{color:var(u002du002dstk-global-color-43441,#111111)}@media screen and (min-width:768px){.ugb-49cb3b9.ugb-text{margin-top:80px !important}}@media screen and (max-width:768px){.ugb-49cb3b9 .ugb-text__title{font-size:32px !important}}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-text__title-wrapper\"><h1 class=\"ugb-text__title\">How to Use Image Settings<\/h1><p class=\"ugb-text__subtitle\">STACKABLE BASICS<\/p><\/div><div class=\"ugb-text__text-wrapper\"><div class=\"ugb-text__text\"><p class=\"ugb-text__text-1\">Master image settings within Stackable and you will create stunning websites in no time!<\/p><\/div><\/div><\/div><\/div><\/div>\n\n\n\n<iframe loading=\"lazy\" width=\"100%\" height=\"500\" src=\"https:\/\/www.youtube-nocookie.com\/embed\/SS60OM8hQBo\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\"><\/iframe>\n\n\n\n<div class=\"wp-block-stackable-columns alignwide stk-block-columns stk-block stk-c778887\" data-block-id=\"c778887\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-c778887-column alignwide\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-2b3fe5d\" data-block-id=\"2b3fe5d\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-2b3fe5d-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks\">\n<p data-block-type=\"core\">In this tutorial, we\u2019ll dive deep into the different image settings available in Stackable.<\/p>\n\n\n\n<p data-block-type=\"core\">You can add the image block by itself, nest it within a block, or add predesigned Stackable blocks that include the image block such as Feature, Feature Grid, and Image Box and more!<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"589\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/1-Stackable-Blocks-1024x589.png\" alt=\"\" class=\"wp-image-23615\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/1-Stackable-Blocks-1024x589.png 1024w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/1-Stackable-Blocks-300x172.png 300w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/1-Stackable-Blocks-768x441.png 768w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/1-Stackable-Blocks-1536x883.png 1536w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/1-Stackable-Blocks-2048x1177.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p data-block-type=\"core\">But apart from those blocks, there are other ways you could add images in a block &#8211; such as adding an image as a block background and a container background.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" data-block-type=\"core\">How to Add an Image Using the Image Block<\/h3>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"543\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/2-Add-image-1024x543.png\" alt=\"\" class=\"wp-image-23616\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/2-Add-image-1024x543.png 1024w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/2-Add-image-300x159.png 300w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/2-Add-image-768x407.png 768w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/2-Add-image-1536x814.png 1536w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/2-Add-image-2048x1085.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p data-block-type=\"core\">To add your asset to the image block, just hover over the image or image placeholder until the cursor changes into a green plus button or you can select an image from the inspector.<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"543\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/3-Media-Library-1024x543.png\" alt=\"\" class=\"wp-image-23617\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/3-Media-Library-1024x543.png 1024w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/3-Media-Library-300x159.png 300w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/3-Media-Library-768x407.png 768w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/3-Media-Library-1536x815.png 1536w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/3-Media-Library-2048x1087.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p data-block-type=\"core\">A modal will appear where you can upload media or select media you have previously uploaded in the media library. Simply click the select files button and select the image you want to use for the block.<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"543\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/4-Select-Files-1024x543.png\" alt=\"\" class=\"wp-image-23618\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/4-Select-Files-1024x543.png 1024w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/4-Select-Files-300x159.png 300w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/4-Select-Files-768x407.png 768w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/4-Select-Files-1536x814.png 1536w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/4-Select-Files-2048x1085.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p data-block-type=\"core\">The image will be added to your media library. Make sure it\u2019s selected and click the Select button.<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"543\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/5-Select-file-and-upload-1024x543.png\" alt=\"\" class=\"wp-image-23619\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/5-Select-file-and-upload-1024x543.png 1024w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/5-Select-file-and-upload-300x159.png 300w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/5-Select-file-and-upload-768x407.png 768w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/5-Select-file-and-upload-1536x815.png 1536w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/5-Select-file-and-upload-2048x1087.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p data-block-type=\"core\">That should add your image to the block.<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"543\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/6-Uploaded-Image-1024x543.png\" alt=\"\" class=\"wp-image-23620\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/6-Uploaded-Image-1024x543.png 1024w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/6-Uploaded-Image-300x159.png 300w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/6-Uploaded-Image-768x407.png 768w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/6-Uploaded-Image-1536x815.png 1536w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/6-Uploaded-Image-2048x1087.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p data-block-type=\"core\"><strong>Adjusting the Image Sizes<\/strong><\/p>\n\n\n\n<p data-block-type=\"core\">The image block is very intuitive and flexible as you can adjust its width by dragging its handlers on the right and bottom sides of the block.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/7-Adjusting-Image-Sizes.mp4\"><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\">Or hover over the image to view the size indicator on the middle of the block. Click this and you will see a modal where you may input the dimensions you want the image to be in.<\/p>\n\n\n\n<figure class=\"wp-block-video\" data-block-type=\"core\"><video autoplay loop muted src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/8-Adjusting-Image-Sizes-2.mp4\"><\/video><\/figure>\n\n\n\n<p data-block-type=\"core\"><strong>Styling the Image Block<\/strong><\/p>\n\n\n\n<p data-block-type=\"core\">Let\u2019s first go through the image block styling options in the inspector<\/p>\n\n\n\n<p data-block-type=\"core\">On the inspector panel on the right, you may adjust the width in different units of measurement like pixel, percentage, or viewport width.<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"532\" height=\"464\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/9-Size-UoM.png\" alt=\"\" class=\"wp-image-23652\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/9-Size-UoM.png 532w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/9-Size-UoM-300x262.png 300w\" sizes=\"auto, (max-width: 532px) 100vw, 532px\" \/><\/figure><\/div>\n\n\n\n<p data-block-type=\"core\">You can change the width for different viewports so you can make your website responsive. Just click the desktop icon beside the width heading.<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"532\" height=\"464\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/10-Size-Responsiveness.png\" alt=\"\" class=\"wp-image-23638\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/10-Size-Responsiveness.png 532w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/10-Size-Responsiveness-300x262.png 300w\" sizes=\"auto, (max-width: 532px) 100vw, 532px\" \/><\/figure><\/div>\n\n\n\n<p data-block-type=\"core\">Adjusting the size of the image may be done either by typing the value in the text field or you can manually adjust it using the Image Width slider. The same goes for the height of your image block.<\/p>\n\n\n\n<p data-block-type=\"core\">There is a text box for alternative text, which will be displayed in case your image fails to load, and for SEO purposes as well.<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"532\" height=\"474\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/11-Image-Alt-Text.png\" alt=\"\" class=\"wp-image-23639\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/11-Image-Alt-Text.png 532w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/11-Image-Alt-Text-300x267.png 300w\" sizes=\"auto, (max-width: 532px) 100vw, 532px\" \/><\/figure><\/div>\n\n\n\n<p data-block-type=\"core\">We have a zoom feature so you can zoom the image in or out.<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"532\" height=\"280\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/12-Image-Zoom.png\" alt=\"\" class=\"wp-image-23640\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/12-Image-Zoom.png 532w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/12-Image-Zoom-300x158.png 300w\" sizes=\"auto, (max-width: 532px) 100vw, 532px\" \/><\/figure><\/div>\n\n\n\n<p data-block-type=\"core\">There are hover styling options for this so you can change this setting for different hover states.<\/p>\n\n\n\n<p data-block-type=\"core\">Hover state styling is available for many image settings. We\u2019ll show you how to experiment with that later on.<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"532\" height=\"280\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/13-Image-Zoom-Hover-State-Styling-1.png\" alt=\"\" class=\"wp-image-23643\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/13-Image-Zoom-Hover-State-Styling-1.png 532w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/13-Image-Zoom-Hover-State-Styling-1-300x158.png 300w\" sizes=\"auto, (max-width: 532px) 100vw, 532px\" \/><\/figure><\/div>\n\n\n\n<p data-block-type=\"core\">Add shadows to your image using the slider or manually inputting the number in the text box.<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"532\" height=\"280\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/14-Image-Shadows.png\" alt=\"\" class=\"wp-image-23644\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/14-Image-Shadows.png 532w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/14-Image-Shadows-300x158.png 300w\" sizes=\"auto, (max-width: 532px) 100vw, 532px\" \/><\/figure><\/div>\n\n\n\n<p data-block-type=\"core\">Image size sets the image display size to thumbnail, medium, large or full size. A smaller image size will load faster.<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"532\" height=\"280\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/15-Image-Size.png\" alt=\"\" class=\"wp-image-23645\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/15-Image-Size.png 532w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/15-Image-Size-300x158.png 300w\" sizes=\"auto, (max-width: 532px) 100vw, 532px\" \/><\/figure><\/div>\n\n\n\n<p data-block-type=\"core\">Next, the border radius lets you add rounded corners for your image.<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"532\" height=\"280\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/16-Border-Radius.png\" alt=\"\" class=\"wp-image-23646\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/16-Border-Radius.png 532w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/16-Border-Radius-300x158.png 300w\" sizes=\"auto, (max-width: 532px) 100vw, 532px\" \/><\/figure><\/div>\n\n\n\n<p data-block-type=\"core\">The next setting is the focal point, which you can adjust by dragging around the focal point picker or by entering the values in the text fields. This setting also has responsiveness and hover state styling available.<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"532\" height=\"918\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/17-Focal-Point.png\" alt=\"\" class=\"wp-image-23647\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/17-Focal-Point.png 532w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/17-Focal-Point-174x300.png 174w\" sizes=\"auto, (max-width: 532px) 100vw, 532px\" \/><\/figure><\/div>\n\n\n\n<p data-block-type=\"core\">Image fit tells the image to fill the block in a variety of ways such as contain, cover, fill, scale down, or none.<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"533\" height=\"489\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/18-Image-Fit.png\" alt=\"\" class=\"wp-image-23648\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/18-Image-Fit.png 533w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/18-Image-Fit-300x275.png 300w\" sizes=\"auto, (max-width: 533px) 100vw, 533px\" \/><\/figure><\/div>\n\n\n\n<p data-block-type=\"core\">You can frame the image using different shapes. And you aren\u2019t limited to that as you can even flip the shape around if you\u2019d like.<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"504\" height=\"1024\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/19-Image-Shape-504x1024.png\" alt=\"\" class=\"wp-image-23650\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/19-Image-Shape-504x1024.png 504w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/19-Image-Shape-148x300.png 148w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/19-Image-Shape.png 512w\" sizes=\"auto, (max-width: 504px) 100vw, 504px\" \/><\/figure><\/div>\n\n\n\n<p data-block-type=\"core\">The image filter setting opens up a modal where you can modify the image effects and filters.<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"466\" height=\"1024\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/20-Image-filter-466x1024.png\" alt=\"\" class=\"wp-image-23651\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/20-Image-filter-466x1024.png 466w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/20-Image-filter-136x300.png 136w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/20-Image-filter.png 512w\" sizes=\"auto, (max-width: 466px) 100vw, 466px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" data-block-type=\"core\">How to Add an Image as a Block Background<\/h3>\n\n\n\n<p data-block-type=\"core\">Make sure you select the block that you want to add a background image to. Click the Block tab in the Inspector, and find the Background panel.<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"543\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/22-Add-background-image-1024x543.png\" alt=\"\" class=\"wp-image-23665\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/22-Add-background-image-1024x543.png 1024w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/22-Add-background-image-300x159.png 300w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/22-Add-background-image-768x408.png 768w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/22-Add-background-image.png 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p data-block-type=\"core\">Just click on the image picker and you will be prompted again to select an image from the media library.<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"542\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/23-Select-Image-background-1024x542.png\" alt=\"\" class=\"wp-image-23667\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/23-Select-Image-background-1024x542.png 1024w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/23-Select-Image-background-300x159.png 300w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/23-Select-Image-background-768x407.png 768w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/23-Select-Image-background-1536x813.png 1536w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/23-Select-Image-background-2048x1084.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" data-block-type=\"core\">Adding an image as a container background<\/h3>\n\n\n\n<p data-block-type=\"core\">To add a background image to a container, make sure you\u2019re selecting the container you want to add an image to. In the style tab, you will find the Container Background panel.<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"543\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/24-Container-bg-1024x543.png\" alt=\"\" class=\"wp-image-23668\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/24-Container-bg-1024x543.png 1024w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/24-Container-bg-300x159.png 300w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/24-Container-bg-768x407.png 768w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/24-Container-bg-1536x815.png 1536w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/24-Container-bg-2048x1087.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p data-block-type=\"core\">Click the image picker and select the image you want to add.<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"542\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/23-Select-Image-background-1-1024x542.png\" alt=\"\" class=\"wp-image-23669\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/23-Select-Image-background-1-1024x542.png 1024w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/23-Select-Image-background-1-300x159.png 300w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/23-Select-Image-background-1-768x407.png 768w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/23-Select-Image-background-1-1536x813.png 1536w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/23-Select-Image-background-1-2048x1084.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"543\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/25-Container-Bg-1024x543.png\" alt=\"\" class=\"wp-image-23670\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/25-Container-Bg-1024x543.png 1024w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/25-Container-Bg-300x159.png 300w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/25-Container-Bg-768x407.png 768w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/25-Container-Bg-1536x815.png 1536w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/25-Container-Bg-2048x1087.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" data-block-type=\"core\">Background Image Settings<\/h3>\n\n\n\n<p data-block-type=\"core\">The container background and block background have the same image settings available.<\/p>\n\n\n\n<p data-block-type=\"core\">The <strong>background color<\/strong> setting determines what color will be overlaid on the image.<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"578\" height=\"424\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/28-BG-Color.png\" alt=\"\" class=\"wp-image-23675\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/28-BG-Color.png 578w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/28-BG-Color-300x220.png 300w\" sizes=\"auto, (max-width: 578px) 100vw, 578px\" \/><\/figure><\/div>\n\n\n\n<p data-block-type=\"core\">The <strong>background media tint strength<\/strong> option lets you adjust the opacity of the background color if you have added it to the block.<\/p>\n\n\n\n<p data-block-type=\"core\">Stackable also provides an option to keep the background image fixed in place while scrolling.<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"578\" height=\"262\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/27-Bg-media-tint-strength.png\" alt=\"\" class=\"wp-image-23674\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/27-Bg-media-tint-strength.png 578w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/27-Bg-media-tint-strength-300x136.png 300w\" sizes=\"auto, (max-width: 578px) 100vw, 578px\" \/><\/figure><\/div>\n\n\n\n<p data-block-type=\"core\">You will see there are advanced background image settings. Clicking the pencil icon will prompt for a modal to appear where you could adjust the image to your liking.<\/p>\n\n\n\n<p data-block-type=\"core\">The advanced image settings have four properties: image position, image repeat, image size, and image blend mode.<\/p>\n\n\n\n<p data-block-type=\"core\">These properties already have default settings selected.<\/p>\n\n\n\n<div class=\"wp-block-image\" data-block-type=\"core\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"602\" height=\"1008\" src=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/26-Adv-Background-Image-Settings.png\" alt=\"\" class=\"wp-image-23673\" srcset=\"https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/26-Adv-Background-Image-Settings.png 602w, https:\/\/wpstackable.com\/wp-content\/uploads\/2022\/03\/26-Adv-Background-Image-Settings-179x300.png 179w\" sizes=\"auto, (max-width: 602px) 100vw, 602px\" \/><\/figure><\/div>\n\n\n\n<p data-block-type=\"core\">The <strong>image position<\/strong> property gives you more control on which part of the background image will be the focal point. Let\u2019s set this to bottom left.<\/p>\n\n\n\n<p data-block-type=\"core\">The <strong>image repeat<\/strong> property will tile the image. This is perfect for if you select a pattern as your background. For our block, we\u2019ll select no-repeat.<\/p>\n\n\n\n<p data-block-type=\"core\">The <strong>image size <\/strong>property adjusts the size of the image.<\/p>\n\n\n\n<p data-block-type=\"core\">And lastly, the <strong>image blend mode<\/strong> sets how the image will blend into the background color.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" data-block-type=\"core\">Start Creating With Stackable<\/h3>\n\n\n\n<p data-block-type=\"core\">Get creative and use these settings to your advantage to make your blocks unique to your website\u2019s personality!<\/p>\n\n\n\n<p data-block-type=\"core\">Now you know the different ways you can customize image settings in a block. So go ahead and apply what you\u2019ve learned here to your website! We can\u2019t wait to see your websites that are #BuiltwithStackable.<\/p>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"alignwide wp-block-ugb-text ugb-text ugb-e3c1de0 ugb-text--design-plain ugb-text--columns-1 ugb-main-block\"><style>.ugb-e3c1de0 .ugb-text__title{color:var(u002du002dstk-global-color-43441,#111111);font-size:24px !important;font-weight:500 !important}.ugb-e3c1de0 .ugb-text__text p{color:var(u002du002dstk-global-color-43441,#111111)}@media screen and (min-width:768px){.ugb-e3c1de0.ugb-text{margin-bottom:80px !important}}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-text__title-wrapper\"><h2 class=\"ugb-text__title\">Related Articles &amp; Documentation<\/h2><\/div><div class=\"ugb-text__text-wrapper\"><div class=\"ugb-text__text\"><p class=\"ugb-text__text-1\"><a rel=\"noreferrer noopener\" href=\"https:\/\/docs.wpstackable.com\/article\/350-what-are-column-backgrounds-and-block-backgrounds\" target=\"_blank\">What are Column Backgrounds and Block Backgrounds?<\/a><br><a href=\"https:\/\/docs.wpstackable.com\/article\/354-what-are-image-sizes\" target=\"_blank\" rel=\"noreferrer noopener\">What are Image Sizes?<\/a><\/p><\/div><\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"alignwide wp-block-ugb-columns ugb-columns ugb-92999a7 ugb-columns--design-plain ugb-columns--columns-2 ugb-main-block\"><style>.ugb-92999a7-content-wrapper{grid-column-gap:24px !important}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-columns__item ugb-92999a7-content-wrapper\">\n<div class=\"wp-block-ugb-column ugb-column ugb-6798e29 ugb-column--design-basic ugb-main-block\"><style>.ugb-6798e29-column-wrapper{border-radius:0px !important}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-column__item ugb-6798e29-column-wrapper ugb--shadow-3\"><div class=\"ugb-column__content-wrapper\">\n<div class=\"wp-block-ugb-text ugb-text ugb-c05ebf7 ugb-text--design-plain ugb-text--columns-1 ugb-text--subtitle-top ugb-main-block\"><style>.ugb-c05ebf7 .ugb-text__title{color:var(u002du002dstk-global-color-43441,#111111);font-size:24px !important;font-weight:500 !important}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-text__title-wrapper\"><h2 class=\"ugb-text__title\">All About Typography (in Stackable)<\/h2><p class=\"ugb-text__subtitle\">PREVIOUSLY IN STACKABLE BASICS<\/p><\/div><div class=\"ugb-text__text-wrapper\"><div class=\"ugb-text__text\"><p class=\"ugb-text__text-1\">By the end of this video, you will have a deeper understanding of all the typography settings within Stackable!<\/p><\/div><\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ugb-button ugb-button-wrapper ugb-1a795ae ugb-main-block\"><style>.ugb-1a795ae .ugb-block-content{justify-content:flex-start !important}.ugb-1a795ae .ugb-button1{border-radius:0px !important}.ugb-1a795ae .ugb-button1:hover{background-color:;opacity:1}.ugb-1a795ae .ugb-button1:before{content:\"\";background-image:linear-gradient(90deg,,);border-radius:0px !important}.ugb-1a795ae .ugb-inner-block{text-align:left}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-button-container\"><a class=\"ugb-button1 ugb-button ugb-button--size-normal ugb-button--ghost-to-normal-effect ugb-button--design-ghost ugb-button--has-icon\" href=\"https:\/\/wpstackable.com\/learn-typography-video\/\" rel=\"\" title=\"\"><div class=\"ugb-icon-inner-svg\"><svg data-prefix=\"fas\" data-icon=\"play-circle\" class=\"svg-inline--fa fa-play-circle fa-w-16\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\"><path fill=\"currentColor\" d=\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z\"><\/path><\/svg><\/div><span class=\"ugb-button--inner\">Watch video<\/span><\/a><\/div><\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ugb-column ugb-column ugb-752684b ugb-column--design-basic ugb-main-block\"><style>.ugb-752684b-column-wrapper{border-radius:0px !important}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-column__item ugb-752684b-column-wrapper ugb--shadow-3\"><div class=\"ugb-column__content-wrapper\">\n<div class=\"wp-block-ugb-text ugb-text ugb-6f87c9b ugb-text--design-plain ugb-text--columns-1 ugb-text--subtitle-top ugb-main-block\"><style>.ugb-6f87c9b .ugb-text__title{color:var(u002du002dstk-global-color-43441,#111111);font-size:24px !important;font-weight:500 !important}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-text__title-wrapper\"><h2 class=\"ugb-text__title\">Copy Paste Styles<\/h2><p class=\"ugb-text__subtitle\">NEXT IN STACKABLE BASICS<\/p><\/div><div class=\"ugb-text__text-wrapper\"><div class=\"ugb-text__text\"><p class=\"ugb-text__text-1\">Learn how to easily copy the styles of one block and paste it to another with just a few clicks!<\/p><\/div><\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ugb-button ugb-button-wrapper ugb-838c0aa ugb-main-block\"><style>.ugb-838c0aa .ugb-block-content{justify-content:flex-start !important}.ugb-838c0aa .ugb-button1{border-radius:0px !important}.ugb-838c0aa .ugb-button1:hover{background-color:;opacity:1}.ugb-838c0aa .ugb-button1:before{content:\"\";background-image:linear-gradient(90deg,,);border-radius:0px !important}.ugb-838c0aa .ugb-inner-block{text-align:left}<\/style><div class=\"ugb-inner-block\"><div class=\"ugb-block-content\"><div class=\"ugb-button-container\"><a class=\"ugb-button1 ugb-button ugb-button--size-normal ugb-button--ghost-to-normal-effect ugb-button--design-ghost ugb-button--has-icon\" href=\"https:\/\/wpstackable.com\/learn-copy-paste-styles-video\/\" rel=\"\" title=\"\"><div class=\"ugb-icon-inner-svg\"><svg data-prefix=\"fas\" data-icon=\"play-circle\" class=\"svg-inline--fa fa-play-circle fa-w-16\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\"><path fill=\"currentColor\" d=\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z\"><\/path><\/svg><\/div><span class=\"ugb-button--inner\">Watch video<\/span><\/a><\/div><\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>How to Use Image Settings STACKABLE BASICS Master image settings within Stackable and you will create stunning websites in no time! In this tutorial, we\u2019ll dive deep into the different image settings available in Stackable. You can add the image block by itself, nest it within a block, or add predesigned Stackable blocks that include &hellip; <a href=\"https:\/\/wpstackable.com\/learn-image-settings-video\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Learn &#8211; Image Settings Video<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":22473,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"no-title.php","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"page_category":[],"class_list":{"0":"post-20360","1":"page","2":"type-page","3":"status-publish","5":"hentry"},"featured_image_urls_v2":{"full":["https:\/\/wpstackable.com\/wp-content\/uploads\/2021\/12\/Stackable-Basics-2.jpg",2400,1248,false]},"post_excerpt_stackable_v2":"<p>How to Use Image SettingsSTACKABLE BASICSMaster image settings within Stackable and you will create stunning websites in no time! In this tutorial, we\u2019ll dive deep into the different image settings available in Stackable. You can add the image block by itself, nest it within a block, or add predesigned Stackable blocks that include the image block such as Feature, Feature Grid, and Image Box and more! But apart from those blocks, there are other ways you could add images in a block &#8211; such as adding an image as a block background and a container background. How to Add an&hellip;<\/p>\n","category_list_v2":"","author_info_v2":{"name":"Benjamin Intal","url":"https:\/\/wpstackable.com\/blog\/author\/gambit\/"},"comments_num_v2":"0 comments","acf":{"block_changelog":"","block_changelog_last_version_updated":""},"_links":{"self":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/pages\/20360","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/comments?post=20360"}],"version-history":[{"count":11,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/pages\/20360\/revisions"}],"predecessor-version":[{"id":23694,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/pages\/20360\/revisions\/23694"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/media\/22473"}],"wp:attachment":[{"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/media?parent=20360"}],"wp:term":[{"taxonomy":"page_category","embeddable":true,"href":"https:\/\/wpstackable.com\/wp-json\/wp\/v2\/page_category?post=20360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}