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

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.