Make background opaque?

HTML-CSS
#1

As the title says… I want a fixed background, and have the rest of the content scrolling up over the BG. BG is an < img > (I am linking to Icedrive for my projects here, as I have my own images I want t use. If anyone knows a better way to use .jpg etc. in projects?).

I want to opaque the BG. is there anyway to do this? I used settings in my page builder before with BG and BG overlay so I have no idea how to code this. Or do I do this before I import the image, so I am importing an opaque image?

Example of what I mean: https://codepen.io/freeCodeCamp/full/VPaoNP

< form > BG vs < div > BG
#2

To make the image more or less see through you can use the “opacity” property and to blur the image you can use “filter: blur(???px)” in your CSS.

If you want to add a hue of color to an image you can opt for “linear-gradient (# of deg, rgba(# of red, # of green, # of blue, alpha), rgba(# of red, # of green, # of blue, alpha))” which is in your reference. As a sidenote, the “a” or “alpha” in rgba refers to the opacity or strength of the hue color (not the background image itself) and its value can be any number between 0 and 1. Afterward (assuming you want to add a linear gradient), add your image URL to the background-image property last, separating the two values linear-gradient and URL for the bg with a comma.

Overall, while you could edit your image outside of CSS in an application such as Adobe Photoshop and then import it to your HTML file, it’s ultimately up to your preference and whether you’re looking for a more thorough polish or quick basic adjustments.

1 Like
#3

I have a form, and I want a background. But I want the background of the < div > color to have an opacity, but I want the form to be solid.

As here: https://codepen.io/Fletchdad/pen/zYKRrgN

I like the BG color to have that opacity but it of course bleeds into the entire < div >, and so my form is also opaque which I obviously do not want. I am missing something real basic I am sure, but thanks in advance.

#4

the form does not have a background color, maybe you want to give a background color to the form?

#5

yea… I am certainly still need to learn to master the obvious…

I am a bit abashed that I didnt think of that…

#6

sadly same thing… again. I gave the form a BG but the < div > opacity of .4 is still taking preference over. the BG color from the form.
codepen here:
https://codepen.io/Fletchdad/pen/zYKRrgN

#7

I don’t see any changes from before, can you save your pen?

#8

Hi @studiofletch.

If you apply the opacity on the parent element then the descendants will have the same opacity. I am afraid what you need requires you to have good knowledge of CSS. You can start with the answers to the stackoverflow questions below and see whether they make sense. I am certain it is something similar you are looking for if not exactly the same.

#9

tx. I saved the pen now

#10

The way it is done here: https://codepen.io/freeCodeCamp/full/VPaoNP
How can I see the code of that pen?

#11

Click “Change view” and then “Editor view”.

#12

Ahh Perfect. Tx. I should be able to see now how it was done! :slight_smile:

#13

using rgba it seems, which was included in the links posted above