How can I select the background image with jQuery?

1

Hello kids!
I am working on my Tribute page and I would like to play a little bit with jQuery. I am trying to make the background image fade out a little to make it easier to read but I cannot figure out how to select it in jQuery. If I select $(‘body’) everything fades out. I only want the background to change.

I tried with a superimposed image in a div and then fade it out with jquery, and it worked, but it seems to be in the foreground and I cannot select the text, nor push buttons.

I’ve been searching for a while in different forums and the answer does not seem to be that obvious.

Here is the on process work: http://codepen.io/alukbluk/pen/WoEEwo

Do you have any ideas? Thank you!

2

You could use z-index to make the foreground elements in front.
Bit of a hassle though.
Why don’t you just re-do the image in an image editor?

Having a closer look, I think what you are trying to do is hard/impossible. You have a black and white image with light areas and dark areas which you are layering grey text on making it virtually unreadable. Fading in and out will not solve that problem.

1 Like
3

You don’t actually need jQuery for this.

You don’t want the background image in the body - you want it in a container (in this case <div id="bg"></div> which currently isn’t being used for anything.

Set that so that it fills the viewport and change the opacity on it.

You can change what color it blends to by changing the background-color on body or html.


#bg{
  background-image: url("https://static1.squarespace.com/static/5617b62ee4b07c3c464fd497/5617c306e4b07013ad7f81e3/5617e3a9e4b0e860d63a839e/1444406186563/Becoming+Jane+Jacobs.jpg?format=1500w");
  background-repeat: no-repeat;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0.2;
}

I forked your pen here:

A few other notes:

  • I would also highly recommend you select a different font face - thin styles are extremely hard to read without good contrast. Ultimately, to help readability, I set the body background-color to black and the font color to white. I also set the opacity on #bg to 0.2.
  • I removed your fadeTo() call on the body element as it was not needed.
  • In fact, I removed your body element from the HTML markup as codepen inserts that itself.
  • Also, why are you using a cursor style of crosshair? That should only be used in highly specific instances of precise selection or box drawing, that sort of thing.

Hope that helps out a bit!
~Micheal

2 Likes
4

Thank you very much for your response. I had already tried that: superimposing an image instead that in the background. But the problem is that in your fork, as it happened in mine, the image is on top of the text and all the elements, so I cannot select the text nor push buttons to play a little bit with jQuery.

This is what I want and why I need jQuery: the background to fade out a little so that I can read the text better: http://codepen.io/alukbluk/pen/WoEEwo
But I cannot yet select my text! or use buttons.

Do you have any ideas?

BTW, your design ideas really improve the design, I will use them for sure! But I want to know how to work with the background in jQuery.

6

Well that seems strange to me.

I made sure that the bg div was earlier in the stacking order than .content so that shouldn’t have been a problem.

I even set a z-index on both so that .content should have been higher in the stack and that didn’t work either.

Ultimately, adding: pointer-events:none; to the bg div handles it.

That CSS property tells and element to ignore all mouse generated pointer-events - so that they pass straight through to the .content.