0

I've got a large div where users can swap out the backgrounds with either patterns or their own images. For small background images that are not sized to cover the entire div, I want the images to repeat horizontally and vertically and not stretch to over 100% of their natural width. For larger images that would cover more than the width of the div, I want to limit those to not stretch beyond 100% of the div width so that the entire width of the image is visible.

Is there any way to accomplish this without using JavaScript?

Plunker here:http://plnkr.co/edit/Pkx49a3Ku34YsupqLCRs?p=preview

#background1 should repeat as it currently is

#background2 should not stretch beyond 100% of the container width

To clarify, I'm looking for a solution that doesn't involve JS and will work for BOTH cases (can't just add styling to a specific element)

Will Hitchcock
  • 4,648
  • 3
  • 22
  • 32
  • 1
    Yes. Give us your code demo / markup. – KatieK Aug 18 '14 at 17:42
  • Added in the original post above! – Will Hitchcock Aug 18 '14 at 18:38
  • 1
    I don’t think there is a pure CSS solution for this using background images (unless you want to read the image dimensions beforehand server-side, and dynamically create media queries working on those values for each individual image). – CBroe Aug 18 '14 at 19:14
  • No, you cannot do this without JS. You would need JS in order to be able to determine the dimensions of the image and, based on those dimensions, specify in what manner they should be displayed. – APAD1 Aug 18 '14 at 19:14
  • Try this link: http://www.mademyday.de/css-height-equals-width-with-pure-css.html from information given in this post http://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout it may help you with what you're looking for – ctwheels Aug 18 '14 at 19:51

0 Answers0