Noob looking to do more than I know how to, HELP

I am currently on the tail end of the Tribute Page project and I am really interested in making the background image I added transparent. Currently, though black and white, the image makes some parts of the text illegible. I don’t like the idea of changing the font color of any of the text, I would much rather just lower the opacity of the background image.

I used the /body background=“myimagehere.jpg”/ method of inserting a background image, but I can’t seem to find a way to lower that image’s opacity.

Any help would be much appreciated.

How about lowering the image’s opacity in GIMP or Photoshop and then uploading it to the webpage?

Hi there!

CSS 3 has an opacity specification that I believe can do what you want. A neat example of how to manipulate an objects opacity (without changing it’s children’s behavior: the text that you mentioned) can be found here:

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_opacity_box2

Hey

Here’s one way to do it with images as background

background-image: 
        -webkit-linear-gradient(
        	rgba(0, 0, 0, 0.65),
        	rgba(0, 0, 0, 0.65)
        	),
        url("/your/url.jpg");
	background-image: 
        -o-linear-gradient(
        	rgba(0, 0, 0, 0.65),
        	rgba(0, 0, 0, 0.65)
        	),
        url("/your/url.jpg");
	background-image: 
        linear-gradient(
        	rgba(0, 0, 0, 0.65),
        	rgba(0, 0, 0, 0.65)
        	),
        url("/your/url.jpg"); ```

The -webkit- and -o- prefixes are for compatibility between browsers issues

The trouble with that is that I don’t know of how to apply that to a body element.

I’m sorry to be a burden, but I’m still very new to coding and not quite sure how I would implement this code.

In the example link I sent you can simply replace everything from div.third to the body opening tag with this text:

.third {
    background: rgba(76, 175, 80, 0.6);
}
</style>
</head>
<body class="third">

then click the run button at the top left.

This kind of hijacks the class definition to apply it to the whole body, but the point is that what you can apply to one element you can - generally - apply to any element. There isn’t really anything special about the itself as far as formatting goes except that it’s the parent of everything else so you will get strange inheritance behaviors if you do too much with it.

CSS is very powerful and can be relatively simple, but it does take some effort to learn. Freecodecamp is amazing but the challenges aren’t designed to teach you mastery by themselves. You absolutely WILL have to use other resources. I like the w3 schools a lot so maybe going through some of their (free) courses on CSS will make it more clear.

I made you this pen to demonstrate if you’re still interested.
If you’re wondering why the image repeats itself it is because it isn’t big enough to fill its container (body in this case)

Hope it helps

1 Like