INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Checkbox to change width of body background image?

Checkbox to change width of body background image?

(OP)
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!

RE: Checkbox to change width of body background image?

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.

CODE

if(chekboxObj.checked)
{
    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

RE: Checkbox to change width of body background image?

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

CODE

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

CODE

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

RE: Checkbox to change width of body background image?

(OP)
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?

CODE

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

RE: Checkbox to change width of body background image?

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:

CODE

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

http://www.w3schools.com/cssref/css3_pr_background...


----------------------------------
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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close