{"id":33984,"date":"2023-02-05T11:16:01","date_gmt":"2023-02-05T09:16:01","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=33984"},"modified":"2023-08-17T18:02:56","modified_gmt":"2023-08-17T15:02:56","slug":"positioning-background-images","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/positioning-background-images\/","title":{"rendered":"Positioning background images"},"content":{"rendered":"\n
\"Example
Typical section\/container with a background image<\/figcaption><\/figure>\n\n\n\n

Making images fit your design<\/h2>\n\n\n\n

Images are a key element to any website. These images can not only be used as elements themselves (using the Image widget<\/a>), they can also be used as backgrounds,or as integral parts of other elements. Sometimes, however, it’s difficult to get your images to fit your design. The basic  concepts outlined below should help you get  a basic understanding of how Elementor works with images and how you can best fit them into your design .<\/p>\n\n\n\n

Making images fit your design<\/h2>\n\n\n\n

Think of the element where you want to place the image as a picture frame. In most cases, the image won\u201dt fit exactly into the frame. Elementor offers you several options to help you determine how that image will be displayed or \u201cfit\u201d into the frame. There are four main options that work together to \u201cfit\u2019 the images into the frame.<\/p>\n\n\n\n

Position – <\/strong>If the image is larger than the element, position determines which part of the image will be visible. Imagine you are sitting in a house with a small window and there is a large mural hanging up outside. Position will move the mural around, determining what part of it you can see. <\/p>\n\n\n\n

If the image is smaller than the element, position determines where within the element the image will be located.<\/p>\n\n\n\n

Position options are: Center Center, Center Left, Center Right, Top Center, Left Center, Right Center, Bottom Center, Bottom Left, Bottom Right and Custom. Choosing custom will open up sliders allowing you to change the x,y positions of the image for more exact placement.<\/p>\n\n\n\n

\"A
On the right is an image. On the left, this is how the image appears as a background and positioned as Top Left.<\/figcaption><\/figure>\n\n\n\n
\"A
A small image being used as a background. The position is set to Center Center and repeat is set to No-repeat.<\/figcaption><\/figure>\n\n\n\n

Repeat <\/strong>– By default, if the image is too small for the element, the image will be repeated so that it takes up the entire element. <\/p>\n\n\n\n