CODEWITHSUNDEEP
javascriptcssasp.net-mvc
user3097695
user3097695

Reputation: 1274

switch background images MVC

I have the following css definition to load a background image.

body, html {
background-repeat: no-repeat;
background-image: url("../images/image1.png");
background-size: 100%;
}

The background image is now displayed on every page. However, we want to switch between "image1.png" and "image2.png" for different applications. Is there a simple way to switch the images by adding some JavaScript code and a button in _layout.cshtml file?

Upvotes: 0

Views: 348

Answers (2)

user1011627
user1011627

Reputation: 1811

Here is a way to use jQuery to switch the background-image. I just wired this up to an HTML anchor tag and set its onclick handler to this function. "imageId" is the id of the img element on my page.

JAVASCRIPT

function switchImage() {
   $('#imageId').css('background-image', "url('imageToReplace.png')");
}

or by customer (psuedo)

function switchImage(customerImageUrl) {
    $('#imageId').css('background-image', "url('+ customerImageUrl +')");
}

HTML

 <a href="#" onclick="switchImage()">Switch</a>

or by customer

 <a href="#" onclick="switchImage('customer1.png')">Switch to Customer 1</a>
 <a href="#" onclick="switchImage('customer2.png')">Switch to Customer 2</a>

Upvotes: 1

Yas Ikeda
Yas Ikeda

Reputation: 1096

In a simple way, have two classes for body in css, and place the different image path there.

body.background1 {
  background-image: url("../images/image1.png");
}
body.background2 {
  background-image: url("../images/image2.png");
}

and then, you can change the background image by just replacing the class in body element in javascript.

Upvotes: 0

Related Questions