Reply To: Responsive background images

• John Huebner

• June 8, 2015 at 9:30 pm

So you’ve used picturfill, I chose to use the urlset of the standard image tag because the <picture> element is not supported by all browsers yet and also because using this element would be difficult for clients. I also default to using different sizes of the same image when the client does not upload different images.

As far as I know there isn’t anything that will dynamically alter the inline style tag to create responsive backgrounds. While I agree that this would be a nice thing to have, actually a great thing to have, I don’t think that it’s something that ACF should do. For the most part ACF does not format the data for you on the front end and doing that for this type of application would be a step away from that.

I can tell you want I did to make dynamic background images, but it’s complicated and I’m not entirely sure it was worth the work.

I used picturefill to create a responsive image tag. This image is hidden on the page. I then wrote JavaScript that runs on page load, reads the src value of the img element and updates the background image of a div. Then on browser resizing JavaScript again reads the src and updates the div if needed.