manipulate image or background-image

Recommended Posts

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?

Share this post

Link to post
Share on other sites

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="" />

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;">

I usually use uikit framework and less

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

 *  TM Overlay BG
[class*='tm-overlay-'] {

[class*='tm-overlay-']:before {
    content: "";
    position: absolute;
    background: fade(@tm-overlay-dark-bg, 60%);

     *  Dark
    [class*='tm-overlay-dark-10']:before {
        background: fade(@tm-overlay-dark-bg, 10%);
    [class*='tm-overlay-dark-20']:before {
        background: fade(@tm-overlay-dark-bg, 20%);
    [class*='tm-overlay-dark-30']:before {
        background: fade(@tm-overlay-dark-bg, 30%);
    [class*='tm-overlay-dark-40']:before {
        background: fade(@tm-overlay-dark-bg, 40%);
    [class*='tm-overlay-dark-50']:before {
        background: fade(@tm-overlay-dark-bg, 50%);
    [class*='tm-overlay-dark-60']:before {
        background: fade(@tm-overlay-dark-bg, 60%);
    [class*='tm-overlay-dark-70']:before {
        background: fade(@tm-overlay-dark-bg, 70%);
    [class*='tm-overlay-dark-80']:before {
        background: fade(@tm-overlay-dark-bg, 80%);
    [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

  • Like 1

Share this post

Link to post
Share on other sites

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).

$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>

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: 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.

  • Like 1

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.