CODEWITHSUNDEEP
jquery
Ronny K
Ronny K

Reputation: 3751

changing the background of a page using jQuery

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);        
});

Upvotes: 0

Views: 108

Answers (3)

Karan
Karan

Reputation: 3338

check this out for nice actions on images using the jquery plugin

http://jobyj.in/adipoli/#demo

Upvotes: 0

David Thomas
David Thomas

Reputation: 253486

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.

Upvotes: 3

Ram
Ram

Reputation: 144729

you can create a div tag which covers the body, set its back-ground color as black, with opacity of, say 0,7, reducing opacity of the body will change opacity of all elements; 

  $('#cover').fadeIn(1000);

Upvotes: 1

Related Questions