CODEWITHSUNDEEP
css
lrtad
lrtad

Reputation: 257

Hide the src image in an <img> element, but show its background image

I have an image element, to which I've added a different background image using CSS.

img {
  background-image: url('https://i.sstatic.net/5eiS4.png') !important;
}
<img src="https://i.sstatic.net/smHPA.png" />

I want to show the CSS-specified background image (the Stack Exchange logo) in the image element, instead of the image specified by the src attribute (the Stack Overflow logo).

Is this possible? I have a situation where I can't alter the HTML or use JavaScript, and am looking for alternatives.

Upvotes: 23

Views: 23802

Answers (8)

Binita Lama
Binita Lama

Reputation: 1278

You can displace the image and add class to the image to give it background. 

img {
    position:relative;
    left:-99999px;
}
.background{
    width : 300px;
    height : 300px;
    background-image: url(https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
    position: relative;
    overflow: hidden;
    left:0;
}

Upvotes: 0

theHarsh
theHarsh

Reputation: 680

You can't change HTML but you can replace the image ! Open Photoshop and make a 100% transparent image with same name as source and put it in the same directory where current image is.

What will happen here ? Image tag will occupy the space as the size of transparent image and background image will be visible :)

Upvotes: -1

TechTho
TechTho

Reputation: 149

make sure the "content" img is the same size as the img you're covering up. This works better than using background-images to cover foreground images.

div.image:before {
  position:absolute;
   content:url(http://placehold.it/350x150);
}

credit this post from a few years back https://stackoverflow.com/a/10833692/3247527

Upvotes: 0

Saurabh Sonawane
Saurabh Sonawane

Reputation: 951

This should work

You image is here

<img src="https://i.sstatic.net/smHPA.png" />

let's say its height is 100px and width is 200px

then your css stylesheet should be like this one

img{
    display: block;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    width:200px;
    height:100px;
    padding-left:200px;
    background:url('https://i.sstatic.net/5eiS4.png') no-repeat;
   }

basically what you have to do, just insert border-box property first and then provide left padding equal to width of the image

Upvotes: 1

Jeremy Banks - Vive le Canada
Jeremy Banks - Vive le Canada

Reputation: 129785

The object-position CSS property, which is supported by both Chrome and Firefox, provides a fairly direct solution to this problem. This property is used to offset the rendering position of the native image within its element. The specification helpfully notes that...

Areas of the box not covered by the replaced element will show the element’s background.

...so as long as we provide an offset which ensures the native image will be entirely out-of-bounds, the background will be visible instead. For example:

img {
  object-position: -99999px 99999px;
  background-image: url('https://i.sstatic.net/5eiS4.png');
}
<img src="https://i.sstatic.net/smHPA.png" />

Upvotes: 32

Gokhan Kurt
Gokhan Kurt

Reputation: 8277

I found a solution that works in all major browsers (tested in IE8+) trying with brute force.

img {
  background-image: url('https://i.sstatic.net/5eiS4.png') !important;
  position: relative;
  overflow: hidden;
  width: 32px;
  height: 36px;
  padding: 32px 36px 0 0;
  box-sizing: border-box;
}
<img src="https://i.sstatic.net/smHPA.png"/>

It has some tricks. You have to give actual width and height of the image as width and height. Then set the padding left and top to that width and height respectively. I don't know if overflow is relevant but just added it. Box-sizing must be border-box.

Edit: Solution is more minimal. One of padding-left or padding-top is enough and there is no need for overflow:hidden. Fiddle with it.

Upvotes: 31

Dheeraj Anand
Dheeraj Anand

Reputation: 1

Don't use images. Use div's with a background image

<img> is an HTML tag. CSS is there to add style to it, not to change the attributes of it. Below mentioned is a workaround. I wouldn't recommend it though. Not a very clean approach.

Sample Code:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
        <style type="text/css">
            .style2{background:url('bg.jpg') 0 0 repeat !important;}
        </style>
    </head>
    <body>
        <div style="background:url(img.png) 0 0; width:728px; height:90px;" class="style2" />
    </body>
</html>

Upvotes: -1

omma2289
omma2289

Reputation: 54619

This isn't possible in every browser, but in WebKit and Blink browsers (such as Safari and Chrome) it can be accomplished by using the content property to replace the src-specified image content of an <img> element. Using content: none to entirely remove it doesn't seem to work, but we can replace it with a transparent GIF to achieve the same effect.

This will change the intrinsic dimensions of the image (to 1x1 in this case), so you'll also need to add an explicitly width and height if they weren't already specified.

img {
  content: url('data:image/gif;base64,R0lGODlhAQABAPAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
  width: 32px;
  height: 36px;
  background-image: url('https://i.sstatic.net/5eiS4.png');
}
<img src="https://i.sstatic.net/smHPA.png" />

Upvotes: 8

Related Questions