Question

how would I dim a background of a page using jQuery?

I have the jQuery code looking like this.

$(document).ready(function(){       
      $("body").fadeTo(1000, 0.33);        
});

Answer 1

If you ‘dim’ the body of the page you’ll be dimming every element on the page, as every element is, by definition, a child of the body element. Particularly if you’re using opacity (as fadeTo() does).

If you only want to dim the background-image of the body element, I’d suggest wrapping another element around the page-content and using a partially-transparent .png as a background-image for that element, or use an rgba() background-color.

1. JS Fiddle background-color proof-of-concept.
2. JS Fiddle background-image proof-of-concept.