---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/polygon_with_image.md
- https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/polygon_with_image.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/en/llms.txt
# Filling a polygon with the image
Open in CodeSandbox
You can fill polygon, rectangle and circle with a background image. Specify a link to the background image in the fillImageHref option.
Type of the background fill - fillMethod. The option can take one of two values:
- stretch - the background image stretches to fit the overlay.
- tile - the background image is repeated without changes in size.
{% list tabs %}
- index.html
```html
Examples. Filling a polygon with the image.
```
- polygon_with_image.js
```js
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map(
"map",
{
center: [60.179022977567406, 30.505805864880234],
zoom: 12,
},
{
searchControlProvider: "yandex#search",
}
);
// Creating a polygon using the Polygon auxiliary class.
var myPolygon = new ymaps.Polygon(
[
// Specifying the coordinates of the vertices of the polygon.
[
[60.1918981644201, 30.513391151974343],
[60.190786978271895, 30.517596855709733],
[60.18411906873506, 30.52532161767263],
[60.17744980033012, 30.52789653832693],
[60.17505537249033, 30.526866570065202],
[60.16949620406973, 30.51313365990895],
[60.16744334943163, 30.512961998532003],
[60.16590362399728, 30.52034343774098],
[60.16325170493725, 30.518626823971463],
[60.161968441206376, 30.512790337155053],
[60.16094179402215, 30.513476982662866],
[60.1600006725024, 30.51055873925465],
[60.16136956759276, 30.5016323476531],
[60.16556145295854, 30.49922908837575],
[60.16992386592128, 30.50060237939137],
[60.171292346312335, 30.502147331783966],
[60.17257524473589, 30.50060237939137],
[60.17334495966222, 30.49734081322926],
[60.176167092910546, 30.481719627926545],
[60.17719326286712, 30.479659691403086],
[60.17787735830078, 30.474509850094513],
[60.181725128740176, 30.471248283932404],
[60.18198163068699, 30.468158379147237],
[60.18300761837183, 30.469531670162862],
[60.182409129464446, 30.47210659081716],
[60.18437555191994, 30.475368156979272],
[60.18574342829046, 30.479659691403086],
[60.18694027321249, 30.482921257565195],
[60.1886499757379, 30.48446620995779],
[60.189419312729555, 30.485496178219496],
[60.189846714352946, 30.48927272851247],
[60.1905305453375, 30.49098934228201],
[60.19155626501584, 30.4903026967742],
[60.192752897330365, 30.49665416772145],
[60.191043409196396, 30.5042072683074],
[60.19232553367115, 30.509185448239027],
[60.1918981644201, 30.513391151974343],
],
],
// Defining properties of the geo object.
{
// The contents of the balloon.
balloonContent: "Fishing spots",
},
{
/**
* Describing the geo object options.
* Fill color.
*/
fillImageHref: "lake.svg",
// Type of background fill.
fillMethod: "stretch",
// Hiding the stroke.
stroke: false,
}
);
// Adding the polygon to the map.
myMap.geoObjects.add(myPolygon);
}
```
{% endlist %}