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
Please Sign in or register to post replies

Write your reply to:

Draft