Is there a way to control opacity of a box background picture?

Xway
1

Without tweaking CSS files… I hope that makes sense.

2

Hi Claude,

CSS doesn’t support this directly. You can change the opacity of the box containing the background image (Opacity in the Style section of the Box Inspector), but that will also change the opacity of text and other content that is inside that box.

You can also use a semi-transparent background colour (choose a colour with less than 100% opacity in Xway).

One option would be to adjust the transparency of the image (using a graphics program) and re-save it as a PNG with transparency. A downside: PNG images tend to be significantly larger than JPEG images,

You can also use the following trick to achieve this effect:

  1. Insert a second container box within the first box
  2. Set it to have absolute position
  3. Set it to have 100% width and 100% height
  4. Set it to be semi-transparent (e.g. 50% opacity)
  5. Give it a z-index of -1, so it appears behind other content within the first box
  6. Apply the background image to this second box. Since the box contains no other content, the background image becomes semi-transparent, but the content that is in the first box is unaffected.