Wikipedia Viewer : Help adding background image and changing opacity

Here’s my project. I’m trying to add this image to the background of my page with low opacity so that my page’s current content and eventually the search output are visible.

Thank you! :evergreen_tree:

Juan Pablo

background-image: url('//what.ever');
opacity: 0.7;

That should do it!

Hi Juan,

Hopefully I am understanding your question correctly. It sounds like you want the background image of your page to be partially transparent so that content can be viewed on top of it.

I have done this using CSS like this:

#bg {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-image: url('<<image URL here>>');
  background-size: cover;
  background-position: center center;
  z-index: -1;
  opacity: 0.3;
}

Then you can wrap your body in a div with id = bg. The z-index is the key here; it basically tells the page to assign the lowest priority to the background image, so that other things appear on top of it.

1 Like

@dpberry552

Thank you! I should’ve worded my question better, but you figured out exactly what I meant.

There is one thing, when I set the opacity to X (some value less than 1), then that becomes the opacity for the entire content of the page, which is logical.

I want the background image to have a lower opacity than the content of the page, particularly the title, search bar, and button. I tried wrapping those components in a div with id=“content” and setting the opacity to 1. Do you have any suggestions for that? Thank you again.

Here’s my code: http://codepen.io/urban_inka/pen/XKyANW

Yes, the code above will accomplish that.

I took that snippet from my tribute page here, if you want to see it in action:

http://codepen.io/dpberry/pen/KMWmeX

Let me know if you have questions.

Daniel

@dpberry552:

I see my mistake now. When you said wrap the body in a div with id=“bg”, I did the following:
`

...
` instead of:

`

...`

Here’s the final result.
Thank you again!

@jpmurillo, you are right. I should have said that differently. Glad it works!

Hello @dpberry552, thanks for helping out with this question. In order to use an image as a background does the image need to have specific file format? The FCC tutorials have used regular URLs thus far. However, that hasn’t been working for me, the images won’t load. And I’ve noticed, after extensive googling, that background images are always .gif .png or .jpg If I only have a regular url, is there a way to make the image a .gif or .png?

I hope this makes sense, because it hardly makes sense to me right now :sob: Thanks for reading!

Hi @nitelight5,

I’m not sure exactly what you mean by “regular URL”. Perhaps you could elaborate on that a little bit? What is happening when you try to load your page?

Thanks, and sorry for the late response. Hopefully you’ve figured it out by now!