manipulate image or background-image

[ngrmm]

is there a way to output jpegs with a color-overlay?

i'd like to have a transparent image with a black background. the admin should be able to set the opacity.
unfortunately i'm not able to change the dom-elements or add some.

so, i have a div with a background-image and a field where i can set a number (0 – 100). is there a way to let PW create an image with some kind of a color-overlay to darken an image?
 

[johndoe]

Can't you just use some css to achieve this? https://css-tricks.com/almanac/properties/b/background-blend-mode/

[ottogal]

18 minutes ago, johndoe said:

https://css-tricks.com/almanac/properties/b/background-blend-mode/

Consider CanIUse.

[ngrmm]

1 hour ago, johndoe said:

Can't you just use some css to achieve this? https://css-tricks.com/almanac/properties/b/background-blend-mode/

thx, good idea but i need IE11 support

[Sergio]

If you have ImageMagick installed on the server, you can use/adapt this little module by @Robin S:

Examples of what's possible to implement yourself: https://stackoverflow.com/questions/32873690/color-overlay-with-opacity-using-imagemagick-in-rails/#answer-33100788

[ngrmm]

thx @Sergio

i found this one and give it a try

https://modules.processwire.com/modules/avb-image/

[lokomotivan]

Ive done something simular recently, well not sure if this is what u looking for:

Simple markup (number in a class represents opacity level)

<div class="tm-overlay-dark-60">
  <img src="" />
</div>

If u want to use it with background image, just need to define height

<div class="tm-overlay-dark-60" style="height:500px;background:url(./myimage.jpg) center center no-repeat;backgroudn-size:cover;">
</div>

I usually use uikit framework and less

@tm-overlay-dark-bg: #000;
@tm-overlay-light-bg: #fff;

/**
 *  TM Overlay BG
 */
[class*='tm-overlay-'] {
    position:relative;
}

[class*='tm-overlay-']:before {
    content: "";
    display:block;
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background: fade(@tm-overlay-dark-bg, 60%);
    z-index:0;
}

    /**
     *  Dark
     */
    [class*='tm-overlay-10']:before,
    [class*='tm-overlay-dark-10']:before {
        background: fade(@tm-overlay-dark-bg, 10%);
    }
    [class*='tm-overlay-20']:before,
    [class*='tm-overlay-dark-20']:before {
        background: fade(@tm-overlay-dark-bg, 20%);
    }
    [class*='tm-overlay-30']:before,
    [class*='tm-overlay-dark-30']:before {
        background: fade(@tm-overlay-dark-bg, 30%);
    }
    [class*='tm-overlay-40']:before,
    [class*='tm-overlay-dark-40']:before {
        background: fade(@tm-overlay-dark-bg, 40%);
    }
    [class*='tm-overlay-50']:before,
    [class*='tm-overlay-dark-50']:before {
        background: fade(@tm-overlay-dark-bg, 50%);
    }
    [class*='tm-overlay-60']:before,
    [class*='tm-overlay-dark-60']:before {
        background: fade(@tm-overlay-dark-bg, 60%);
    }
    [class*='tm-overlay-70']:before,
    [class*='tm-overlay-dark-70']:before {
        background: fade(@tm-overlay-dark-bg, 70%);
    }
    [class*='tm-overlay-80']:before,
    [class*='tm-overlay-dark-80']:before {
        background: fade(@tm-overlay-dark-bg, 80%);
    }
    [class*='tm-overlay-90']:before,
    [class*='tm-overlay-dark-90']:before {
        background: fade(@tm-overlay-dark-bg, 90%);
    }

    /**
     *  Light
     */
    [class*='tm-overlay-light-10']:before {
        background: fade(@tm-overlay-light-bg, 10%);
    }
    [class*='tm-overlay-light-20']:before {
        background: fade(@tm-overlay-light-bg, 20%);
    }
    [class*='tm-overlay-light-30']:before {
        background: fade(@tm-overlay-light-bg, 30%);
    }
    [class*='tm-overlay-light-40']:before {
        background: fade(@tm-overlay-light-bg, 40%);
    }
    [class*='tm-overlay-light-50']:before {
        background: fade(@tm-overlay-light-bg, 50%);
    }
    [class*='tm-overlay-light-60']:before {
        background: fade(@tm-overlay-light-bg, 60%);
    }
    [class*='tm-overlay-light-70']:before {
        background: fade(@tm-overlay-light-bg, 70%);
    }
    [class*='tm-overlay-light-80']:before {
        background: fade(@tm-overlay-light-bg, 80%);
    }
    [class*='tm-overlay-light-90']:before {
        background: fade(@tm-overlay-light-bg, 90%);
    }

Maybe u need to change :before z-index if you dont use image as background image

[ngrmm]

thx @lokomotivan

actually i was able to append a div with javascript and to use it as a overlay.
 

ps: i also found this 

 

[strandoo]

Maybe I'm missing something, but I've been using the following technique to darken my 'hero' images so I can put white text over the top:

In my template, I have two fields, 'hero_image' and 'hero_overlay' (usually an integer if I'm dealing with alpha/opacity - or a text field if I want to specify rgba colour values).

<?php 
$hero = "{$page->hero_images->first->width(1920)->url}"; //simplified; I usually do some responsive stuff here.
$heroOpacity = $page->hero_overlay ? $page->hero_overlay : 0.3; // set a default opacity
$heroOpacity = $heroOpacity * 0.1; //convert integer to a percentage.
?>
<section class="hero" style="background: url('<?php echo $hero; ?>') 50% 50% no-repeat;background-size: cover;">
    <div class="hero-overlay" style="background: rgba(0,0,0,<?php echo $heroOpacity; ?>)"></div>
  ...
</section>

Styles: .hero has a fixed height and .hero-overlay is absolutely positioned to fill the width and height of .hero. (I use 'first->' with my hero images because I like to try out different images and the ones I don't use can stay in the system in case I change my mind). The beauty of this system is that you can match the overlay opacity to the image to get the best fit between text legibility and hero image.

I suppose you could reverse this and apply css opacity to whatever div holds the background image, thereby controlling the opacity of the image and letting a background color fill show through (as the ngrmm mentions in the o.p.)

You can see this here: https://www.creationofnature.co.uk. Play with the opacity in the inspector. You can also expand this with 'rgba(x,x,x,x,)' instead of opacity to get coloured overlay effects.