Copied to clipboard

Flag this post as spam?

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


  • René Andersen 238 posts 684 karma points
    Mar 23, 2015 @ 15:33
    René Andersen
    1

    Change background-image in the CSS

    Hi

    I am almost sure that this is not possible, but I try to ask anyway. :-)

    I need a background-image in the CSS to change when I choose another image in Umbraco backoffice.

    I that even possible? Maybe with something like @Umbraco.Field?

    Or could it be done in another way?

    // René

  • Lars 66 posts 136 karma points
    Mar 23, 2015 @ 16:25
    Lars
    0

    Hi René

    This can be done by razor syntax in a Template or a Partial . You will need the Media Picker for the Content section. In the Setting section this is the way to get the Media file with razor syntax:

     @{
               if (CurrentPage.HasValue("myPicture")){
            var dynamicMediaItem = Umbraco.Media(CurrentPage.myPicture);
            <img class="img-responsive caption__media" src="@dynamicMediaItem.umbracoFile" alt="@dynamicMediaItem.Name" />         }
            }

    // Lars

     

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Mar 23, 2015 @ 21:06
    Jan Skovgaard
    1

    Hi René

    As Lars mentions you'll need to render the image using Razor - You can't use @Umbraco.Field since it will only return the image id.

    So what you need to do is to fetch the image and write out the path in an internal stylesheet or perhaps inline directly on the element depending on what you need to achieve. Say you need to change the background image on a page then you can write something like this

    <html>
    <head>
    
     @{ 
               if (CurrentPage.HasValue("myPicture")){ 
                  var dynamicMediaItem = Umbraco.Media(CurrentPage.myPicture); 
              <style>
                        .my-background{
                             background: url(@dynamicMediaItem.umbracoFile) no-repeat;
                        }
                </style>
             } 
       }
    
    </head>
    <body>
    <!-- Your content here -->
    </body>
    </html>
    

    Does this work for you?

    /Jan

  • René Andersen 238 posts 684 karma points
    Mar 23, 2015 @ 21:30
    René Andersen
    0

    Hi Lars

    As far as I can see then your code just show a image whit a alt text. What I need is to change a background-image in the CSS code.

    See this CSS code:

    .team-photo {
    background: url(../img/image1.jpg) no-repeat center center fixed;
    }

    Is it possible to change image1.jpg from the Umbraco backoffice?

    // René

  • René Andersen 238 posts 684 karma points
    Mar 23, 2015 @ 21:33
    René Andersen
    0

    Ups...Jan your answer came while I was writing my answer to Lars.

    I will try your approach. Thanks!

    // René

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Mar 23, 2015 @ 21:40
    Jan Skovgaard
    0

    Hi René

    You're welcome - Not sure if the syntax is right though - It depends how you're dealing with the image etc. but the idea is the same...if that makes sense :)

    Otherwise let us know.

    /Jan

  • René Andersen 238 posts 684 karma points
    Mar 23, 2015 @ 21:52
    René Andersen
    0

    Hi Jan

    Your code worked just perfect.

    Thanks man....:-)

    // René

Please Sign in or register to post replies

Write your reply to:

Draft