8

I was wondering whether it's possible to get background-image to be on top of all html img's in a certain div (like a sort of mask)

I tried:

#content img{
    position:relative;
    background-image:url('./images/image-mask-2.png');
    z-index:100;
}
L84
  • 45,514
  • 58
  • 177
  • 257
Mangled
  • 227
  • 1
  • 2
  • 13
  • 1
    Its bad practice to do that for background images, you will end up with alot of dirty code. And I thing its unnecessary, cause the reason you put an image as a background you want it to be the first layer on the z-index (that is the whole concept behind `background-image:url('./images/image-mask-2.png');`) – Simo Mafuxwana Sep 09 '13 at 14:11
  • are you OK with using JavaScript or do you need it CSS only? – andi Sep 09 '13 at 14:27

6 Answers6

7

try to use padding instead of using width and height

#content img{
    height: 0;
    width: 0;
    padding: 35px 120px; // adjust that depend on your image size
    background-image: url('YOUR_IMAGE_PATH');
    background-repeat: no-repeat;
}
Abdulrazak Alkl
  • 923
  • 8
  • 14
3

For a background image to cover another image, it must be a background on an element that covers said image (e.g. one that is absolutely positioned).

An element's own background cannot appear above its content.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • That's pretty much what I figured but I was hoping there was a simple and easy way of putting a mask over images. Since the images are put in the content in wordpress (without any certain pattern), I needed it to apply to all images in the "content" div. Any suggestions? – Mangled Sep 09 '13 at 20:28
1

No, the image defined in the <img src=''> is the foreground content of the element.

The background-image is the background of the element. It is shown behind any content.

The clue is in the name.

The only way you can get a background image to appear on top of the foreground content is for it to be the background of a separate element that is positioned on top of the main element.

You can do this without additional HTML markup by making use of the CSS ::before pseudo-selector. This adds a CSS-controlled element to the page next to your main element in the DOM. This can then be styled with z-index and positioning, so that is is on top of the main element. Then its background-image will appear on top of the main image from the original element.

However, ::before is not supported on img tags in all browsers, so this technique is not recommended.

Spudley
  • 166,037
  • 39
  • 233
  • 307
1

Just use a div to place a background on another background? Give the body a background and your div?

Loko
  • 6,539
  • 14
  • 50
  • 78
0

Its bad practice to do that for background images, you will end up with alot of dirty code. And I thing its unnecessary, cause the reason you put an image as a background you want it to be the first layer on the z-index (that is the whole concept behind background-image:url('./images/image-mask-2.png');)

Simo Mafuxwana
  • 3,702
  • 6
  • 41
  • 59
0

To start with, I created a custom image size of 315px * 270px

add_action( 'after_setup_theme', 'image-size-setup' );
add_image_size( 'image-with-mask', 315, 270, true );

function image-size-setup() {

function custom_in_post_images( $args ) { $custom_images = array('image-with-mask' => 'Image with mask'); return array_merge( $args, $custom_images ); } add_filter( 'image_size_names_choose', 'custom_in_post_images' );

}

I ended up using add_filter function (in wordpress) to replace tags which had width of 315px and height of 270px with 2 div's (one for the mask and one for the picture)

function some_filter_content($content) {
    $result = array();

    return preg_replace('/<img.class="(.*?)".src="(.*?)".width="315".height="270".\/>/i', '<div style="background: url($2); width:315px; height:270px; float:left;"><div class="mask"></div></div>', $content);

}
    add_filter('the_content', 'some_filter_content');
Mangled
  • 227
  • 1
  • 2
  • 13