>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3485197. --> Reported by: [mikee](https://www.drupal.org/user/236659) Related to !12 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>Background Image Formatter doesn't work for multivalue fields when using 'Media' field (it does work when using multivalue fields for 'Image' field).</p> <h4 id="summary-steps-reproduce">Steps to reproduce</h4> <p>1. Create new Field<br> For a content type add a new field and select 'Media'. For the field name I suggest using "Background Images". For Allowed number of values select "Unlimited". For media type select 'Image'.</p> <p>2. Manage Display for the field<br> Click "Manage Display" tab and then for our new field of "Background Images" select "Rendered entity" and Save.</p> <p>3. Add new View Mode<br> Under /admin/structure/display-modes/view scroll down to "Media" and then click "Add view mode for Media" and add (I suggest) "Background image formatter". For "Enable this view mode for the following Media types" select "Image".</p> <p>4. Manage Display (for Media Image)<br> Under /admin/structure/media/manage/image click the "Manage display" tab and then below click the "Background image formatter". Then for the Image format select "Background image" and select the cog to the right to configure. Here the user is invited to add the selectors for the Background Images Formatter under Default CSS Settings.</p> <p>It advises "A valid CSS selector that will be used to apply the background image. One per line. If the field is a multivalue field, the first line will be applied to the first value, the second to the second value... and so on."</p> <p>For the selectors add the following on new lines:</p> <p>.bg1<br> .bg2<br> .bg3<br> .bg4<br> .bg5<br> .bg6</p> <p>Then click the Update button and finally the Save button.</p> <p>5. Add new content (node) using the new field "Background Images".<br> Click to add new content and then for the field click on the "Add media" and select multiple images and then Save the node. </p> <p>Then look at the source code for the page. It only outputs all the images using only the first selector ".bg1" and doesn't use the other selectors that were added on subsequent lines.</p> <p>An example is below:</p> <pre>&lt;style media="all"&gt;.bg1<br> {background-color: #FFFFFF !important;background-image:&nbsp; url('https://d10-cbd-dev.ddev.site/sites/default/files/styles/large/public/2021-12/acrylic-picker.jpg?itok=jh5uot1p') !important;background-repeat: no-repeat !important;background-attachment: scroll !important;background-position: left top !important;z-index: auto;}&lt;/style&gt;<br><br>&lt;style media="all"&gt;.bg1<br> {background-color: #FFFFFF !important;background-image:&nbsp; url('https://d10-cbd-dev.ddev.site/sites/default/files/styles/large/public/2021-12/quartz-picker.jpg?itok=6eJMqq8D') !important;background-repeat: no-repeat !important;background-attachment: scroll !important;background-position: left top !important;z-index: auto;}&lt;/style&gt;<br><br>&lt;style media="all"&gt;.bg1<br> {background-color: #FFFFFF !important;background-image:&nbsp; url('https://d10-cbd-dev.ddev.site/sites/default/files/styles/large/public/2021-12/wood-picker.jpg?itok=1kMuufc3') !important;background-repeat: no-repeat !important;background-attachment: scroll !important;background-position: left top !important;z-index: auto;}&lt;/style&gt;</pre><h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>Update the module so that for multivalue fields the appropriate selectors are applied. That is, if the field is a multivalue field, the selector on the first line will be applied to the first value, the second to the second value... and so on.</p> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <h3 id="summary-ui-changes">User interface changes</h3> <h3 id="summary-api-changes">API changes</h3> <h3 id="summary-data-model-changes">Data model changes</h3>