Sign in Register
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Søren Reinke 158 posts 206 karma points c-trib
    Jul 04, 2014 @ 12:32
    Søren Reinke
    0

    Background-Image problems

    Hi there

    I'm having a little problem with your nice tool.

     

    I'm trying to do this:

    <div class="section top header_anim" style="background-image: url('@featureImage.GetResponsiveImageUrl(1200)')">

     

    But it add's this in the source code:

    <img data-src="/media/1001/top banner.jpg?anchor=center&amp;mode=crop&amp;quality=90&amp;width=270&amp;heightratio=0.5962962962962962962962962963&amp;slimmage=true&amp;rnd=130485982960000000" alt="" data-slimmage="true" src="/media/1001/top banner.jpg?anchor=center&amp;mode=crop&amp;quality=90&amp;width=2080&amp;heightratio=0.5962962962962962962962962963&amp;slimmage=true&amp;rnd=130485982960000000" data-pixel-width="2080">

    And places the tag in the wrong place.

    Does it only work for the <img> tag?

    Copy Link
  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Jul 04, 2014 @ 12:41
    Jeavon Leopold
    0

    Hi Søren,

    Glad you like Slimsy :-)

    Unfortunately Slimmage does not support background images, you see a thread here and a useful link to how to support responsive background images using media queries.

    You could of course use the native GetCropUrl method to generate the url of your background image.

    <div class="section top header_anim" style="background-image: url('@featureImage.GetCropUrl(1200,1200)')">

    Note: this requires that @featureImage is strongly typed (Umbraco.TypedMedia) rather than dynamic (Umbraco.Media)

    On further thing, GetResponsiveImageUrl requires two parameters, if you want a flexible height just pass in 0, e.g. GetResponsiveImageUrl(1200,0)

    Jeavon

    Copy Link
  • Søren Reinke 158 posts 206 karma points c-trib
    Jul 04, 2014 @ 13:01
    Søren Reinke
    0

    Thanks Jeavon

    I am not sure Media Queries is the way forward, because the background image is an Umbraco image, that changes from page to page.

    I need a user selectable from umbraco responsive image, was hoping your tool could do that.

    Adding the possibility to handle background-image would be real nice.

    But i'll of cource still use the tool for every other image on the webside :)

    Have a nice weekend 

    Copy Link
  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Jul 04, 2014 @ 13:07
    Jeavon Leopold
    0

    Cool, I would use GetCropUrl(1200) for the background then :-) FYI: GetCropUrl can accept a single width parameter without a height.

    p.s Have you seen my uHangOut about the Image cropper and Slimsy? If not it's here

    Copy Link
  • Søren Reinke 158 posts 206 karma points c-trib
    Jul 04, 2014 @ 13:08
    Søren Reinke
    0

    I'll watch the hangout straight away :)

    Copy Link
  • Jason Prothero 422 posts 1243 karma points MVP c-trib
    Nov 06, 2015 @ 18:49
    Jason Prothero
    1

    FYI,

    For those interested, I have a pending pull request for a background image plugin for slimmage. I needed it to get the grid BG images responsive.

    https://github.com/imazen/slimmage/pull/57

    Thanks, Jason

    Copy Link
  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Nov 06, 2015 @ 19:15
    Jeavon Leopold
    0

    Super cool Jason!

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies