CODEWITHSUNDEEP
jquerycssasp.net-mvcbackground-image
klevendoglu
klevendoglu

Reputation: 622

Jquery dynamic background image url does not work

I want to display different background-images from my background image folder when a user refreshes a page or clicks different pages.

In my layout i'm caching my image's path but i could not make jquery to show it properly. background-position and background-attachment attributes are working but background-image is not being created by jquery. It's like jquery skips background-image code.

By the way my backgroundUrl property creates like a path "/images/background/1.jpg" so it's properly working. Thanks for any help.

@{

    var items = Utils.GetImages("background", 3);
    var backgroundUrl = items.FirstOrDefault();

}
<script type="text/javascript">
    $(document).ready(function (backgroundUrl) {
        $('body').css({
            'background-image': 'url(' + backgroundUrl + ')',
            'background-position': '50% 0%', 'background-attachment': 'fixed'
        });
    });
</script>

Upvotes: 0

Views: 383

Answers (1)

Chaitanya Gadkari
Chaitanya Gadkari

Reputation: 2807

This is how you can use variable in jquery script "@variable name"

@{

    var items = Utils.GetImages("background", 3);
    var backgroundUrl = items.FirstOrDefault();

}
<script type="text/javascript">
    $(document).ready(function () {
        $('body').css({
            'background-image': 'url(' + "@backgroundUrl.ToString()" + ')',
            'background-position': '50% 0%', 'background-attachment': 'fixed'
        });
    });
</script>

Upvotes: 1

Related Questions