0

I am not a graphic desginer but I have a colorful image which I use in HTML as a background image, to which I want to add an overlay in GIMP.

In HTML-CSS I would do this:

<div style="background: url("1.jpeg");">
    <div style="background: rgba(1, 1, 1, 0.7);">
    <div>
</div>

But, I wish that the CSS rgba(1, 1, 1, 0.7) overlay would be added to that background image directly in GIMP.

Current background image (screenshot from an HTML webpage)

enter image description here

Desired image (screenshot from an HTML webpage)

enter image description here

HTML codes (ensure to note the font color changes)

Current situation

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<div style="width: 500px; height: 500px; background: url(1.jpeg);">Text text text text text</div>

</body>
</html>

Trying to add an overlay by extra HTML-CSS (which I try to avoid in this particular case)

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<div style="width: 500px; height: 500px; background: url(1.jpeg); color: #fff">
    <div style="width: 500px; height: 500px; background: rgba(1, 1, 1, 0.7);">Text text text text text</div>
</div>

</body>
</html>

My question

How to change the image in GIMP so it would have such dark overlay of rgba(1, 1, 1, 0.7), directly in GIMP?

3
  • Hi. Welcome to GDSE. There is no CSS functionality in GIMP. Can you please show us an example of what you want to achieve? A screenshot would help. What kind of starting image do you have? In what way do you want to overlay the image? What do you want it to look like? Please edit your question and add some additional information. Thanks
    – Billy Kerr
    Oct 19, 2023 at 17:19
  • Hi Billy ! Please have a look at the screenshots and full HTML codes. Oct 19, 2023 at 17:57
  • I thank all answerers for their remarks ! Oct 19, 2023 at 18:11

3 Answers 3

2

As your example has a full overlay:

  1. Make a new layer.
  • Right-click on the layers panel, and choose New layer.

enter image description here

  1. Prepare the color 1,1,1

Use the 255 notation

enter image description here

  1. Fill the layer

enter image description here

  1. Change opacity to 70%.

enter image description here

There is a chance the image will look a bit different than using CSS, change the opacity to match your espectation.

4
  • How would you do that in GIMP? I know basically nothing about image manipulation programs and seek some explanation how to start. Oct 19, 2023 at 18:00
  • I edited the answer and posted an image. Let me polish a bit the steps...
    – Rafael
    Oct 19, 2023 at 18:02
  • 1
    @Rafael - great minds think alike!! LOL
    – Billy Kerr
    Oct 19, 2023 at 18:05
  • Updated step by step.
    – Rafael
    Oct 19, 2023 at 18:11
1

Open your image in GIMP.

  1. Do Layer > New Layer

  2. Double click the foreground colour square in the tool bar, and set #010101 as the colour

  3. Do Edit > Fill with FG colour

  4. In the Layers panel set the layer opacity to 70%

0

The question contains one contradiction: Inserting a nearly black transparent overlay doesn't give the other wanted thing i,e, turn the black text-like part of the image to white. But the fix is easy:

enter image description here

(sorry for using another program, but GIMP has the same curve adjustment)

The pyramid scene doesn't contain anything especially dark and no hue shifts are expected, so the job can be done by inserting a curve which reduces brightness and contrast in the lighter half of the brightness scale and inverts everything near the black

The expected result is in the right. The original after applying the shown curve is in the left.

I guess it's best to handle the text separately as a text object for sharpest result and to use a photo which contains no text. So consider this only as a comment which is inserted to give some auxiliary info.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.