2

With the simple image field we are able to set the image style and use that to set the image as a background for a div tag (see example below). HOwever, as Drupal 8 has Responsive Image module, the image field will generate like below. With different breakpoints, different images are fetched by the browser, but this make it difficult to set the image as a background.

The current implementation is flexible because as the text grows so does the height of the div containing the image as a background image.

How would you use the picture tag to set the image as a background? I have not found a way to have Drupal detect what image is being fetched by the browser.

Goal:

  1. Have image as a background
  2. Overlay text on top of image
  3. As the overlay text grows, so does the div containing the text. As such the image as a background should grow as well.

Current implementation without Responsive Images:

<div class="wrapper">
    <div class="wrapper_img" style="background-image: url('/sites/default/files/banner_large/name.jpg')"></div>
    <div class="wrapper_content">Authoritatively reinvent magnetic ROI without excellent interfaces. Professionally drive extensive manufactured products through 24/365 leadership. </div>
</div>

Responsive image outputs which makes it difficult to set the background image (banner_large, banner_medium, banner_small are image styles)

<picture>
<source srcset="/sites/default/files/banner_large/name.jpg 1x" media="all and (min-width:1200px) type="image/png" >
<source srcset="/sites/default/files/banner_medium/name.jpg 1x" media="all and (min-width:768px) type="image/png" >
<source srcset="/sites/default/files/banner_small/name.jpg 1x" media="all and (min-width:320px) type="image/png" >

<img src="/sites/default/files/banner_small/name.jpg" alt="text" typeof="foaf:Image">

</picture>
  • You could just use CSS, use the z-index to move the text in front of the of the image. See example. – No Sssweat Nov 29 '17 at 6:38
  • @NoSssweat the problem with that is i need the div.wrapper to grow as the div.wrapper_content grows. If the text gets larger or smaller than the image should also get grow/shrink with it, hence the div.wrapper element. – usernameabc Nov 29 '17 at 18:49
0

Found that we can modify the responsive-image.html.twig to do what we need. We used a combination of the following links:

  1. Responsive images
  2. Responsive images (MDN Web docs)
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.