Rich-text Reply

I want to change the background image of a page, but the image is in the CSS.

nightryder 11-05-14
Accepted Solution

I want to change the background image of a page, but the image is in the CSS.

Hi There!

 

I am trying to run a test on a page where I test the effect on conversion from using different background images. However, the background is being loaded via the CSS file.

 

In my CSS file, the code for the background image is as follows:

 

{.campaign-cover{background-image: #19286b url("../img/backgrounds/blueshark_@2x.jpg");}}

How would I go about changing this in the test variations?

 

I would suspect that I make the changes in the 'edit code' box.

 

I tried using the following code recommended by Optimizely, but it didn't work for me:

 

$("body").css({'background-image':'url("http://exampleurl.com/image.jpg")'});

 Any ideas out there? 

nightryder 11-05-14
 

Re: I want to change the background image of a page, but the image is in the CSS.

Hi there,

After a couple hours I actually figured it out.

I would write the following into the 'edit code' box:

$(".campaign-cover").css({"background-image":'url("http://www.example.com/image.jpg")'});

Hope that helps someone else though!

Re: I want to change the background image of a page, but the image is in the CSS.

Hi @nightryder,

 

We're so glad you were able to achieve a solution on your own!

 

Your scenario raises many other great examples that may be helpful for our community.  Changing the image can indeed attract different users to your site or motivate those on the fence to convert.  You can also enhance or downplay the background image through a few CSS changes, like the following:

$("body").css('background-image','none');
$("body").css({"background-size":"cover"})
$("body").css({"background-repeat":"no-repeat"});

The first option tests eliminating the image; the second tests covering the entire HTML element with the image (at the risk of hiding part of the image); and the third tests reducing the occurences of the background image.

 

The Optimizely visual editor does allow you to try out several of these attributes.  The first screenshot below shows the menu that can be accessed by clicking an element, then selecting Edit Element -> Edit Style, clicking the Color & Background tab, and then clicking the Show Advanced button.

edit_style.png

 

The second screenshot below shows the value options for the background-repeat attribute.

repeat.png

 

Have fun with them!

Harrison Krat
Solutions Architect | Optimizely, Inc.
harrison@optimizely.com
 

Re: I want to change the background image of a page, but the image is in the CSS.

Hi, I had the same challenge and did it like you suggested but I am now seeing both background images. Any idea why?

 

$("ul.link-list").css({"background-image":'url("https://cdn.optimizely.com/img/791773171/b1306aefe6134d3180ae0c13b02f78b7.png")'});
$("ul.link-list").css({"background-repeat":"no-repeat"});

 

 

Question.JPG

Re: I want to change the background image of a page, but the image is in the CSS.

Hi @BastianSchaefer,

 

Is your new background image not the same size as the original, or the overall container where the image lives?  If not, and say the old image is bigger, then it is possible the old image would still show because the new image doesn't cover it.

 

In addition to your background-repeat:no-repeat, you'll want to add either:

$("ul.link-list").css({"background-size":"cover"});

or:

$("ul.link-list").css({"background-size":"contain"});

 

You can see the difference in how those two properties behave here.  Can you give one of those a shot and see if it helps?

Harrison Krat
Solutions Architect | Optimizely, Inc.
harrison@optimizely.com