Jump to content

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

  • Like 1

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Create New...