Checkbox to change width of body background image?

[cbsarge]

I have simple Chrome extension that injects some html into a game webpage that lets a user customize the background image of the webpage. It stores the URL of the image with setlocalstorage so that when they return to the game the custom background image is still there. I've included some CSS that forces the image to fit the width of the browser window. This satisfies most users but, there are a few that have requested I allow them to turn off the width-matching feature. What I'd like to do is add a check box to allow the user to turn off the width adjustment.

I'm thinking some sort of "if the box is checked apply this class to the body tag" sort of thing but, I can't seem to figure it out.

If someone could show me how to accomplish this I'd really appreciate it!

 

[vacunita]

This is definitely going to require JS, and modifying the CSS via JS on the fly. You'll probably want to stick it in the onload event of body of the page so it runs when the page is loaded.

if(chekboxObj.checked)
{
[tab]backgroundObj.style.cssstylingtochange="newvalue";
}

Without knowing exactly how your background is set, and made to fit, there's not much more that can be said.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[cbsarge]

The CSS I include with the extension to keep the image in view and shrink to the width of the browser is this:

body {
  background-attachment:fixed !important;
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: cover !important;
}

I was thinking I could make a class in my CSS that only includes the back-ground-attachment portion and apply that with the checkbox

body.FJactual {
  background-attachment:fixed !important;
}

 

[cbsarge]

Could the function in the js file look something like this and then just call the function with an onclick event tied to the checkbox?

function FJactual () {
	if(chekboxObj.checked)
{
    backgroundObj.style.background-size="cover !important";
}
	else
	backgroundObj.style.background-size="auto !important";
}

 

[vacunita]

You can choose to change the class associated with the element sure, or just change the value.

To access the CSS property do the following:

backgroundObj.style.backgroundSize="cover !important";

http://www.w3schools.com/cssref/css3_pr_background-size.asp

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech