Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Vamsi Pavan Mahesh Gunturu
Vamsi Pavan Mahesh Gunturu
4,541 Points

Can anyone suggest me how to reduce the thickness of background image

Hi I'm trying to build a simple site. I have a background image but it seems to be too thick and the text above it not visible properly. Can you one suggest how to reduce the opacity of the background image. Here is my code

<!DOCTYPE html> <html lang="en"> <head> <title> Vamsi Pavan Mahesh Gunturu </title> <meta charset="UTF-8">

<style>

body{
    text-align: center;
    background: url("http://imgsrv.legends1027.com/image/wlgz/UserFiles/Image/Wiki%20Corner/golden%20gate%20bridge.jpg");
    background-size: cover;
    color: white;
    font-size: 22px;
}
input{
    border: 0;
    padding: 10px;
    font-size: 18px;
}

input[type="submit"]{
    color: white;
    background: red;

}

img{
    width: 165px;
    height: 173px;
    border: 5px solid white;
    border-radius: 50%;
}

</style>

</head> <body> <img src="https://uploads.teamtreehouse.com/production/profile-photos/1140252/avatar_IMG_20140618_161850198.jpg">

<h1>G V P Mahesh</h1>
<p>Hi, I'm Gunturu Vamsi Pavan Mahesh. I am a programmer and I insist on writing clean code. Say Hi! </p> 
<input type="email" placeholder="Your Email Address">
<input type="submit">

</body>

</html>

1 Answer

Codin - Codesmite
Codin - Codesmite
8,600 Points

Made an example for you here: http://codepen.io/anon/pen/EVBOqr

To darken and reduce the background a bit I have:

  1. Removed the background image from body.
  2. Changed body's background to black.
  3. Created a new div that is fixed position 100% width and height called background.
  4. Added z-index -1 to the background div and z-index: 1 to the body. This will make sure the background is behind the elements wrapped by the body of your page even though background div is fixed positioned.
  5. I have added your backround image to the background div.
  6. Then added 50% opacity to the backround image so that the black backround from the body shows through making it darker and easier to see the white text.

(I have added backwards compatibility for old browsers to understand the opacity changes).

The reason for removing the background image from body and creating a new background div is because if you changed the opacity of the body element it would lower the opacity of all child elements wrapped by the body element.

Vamsi Pavan Mahesh Gunturu
Vamsi Pavan Mahesh Gunturu
4,541 Points

Thanks a ton!