skip to Main Content

I’m have two images which are both the same, one of which I edited the opacity to 90% in photoshop. My original image renders fine while my edited image(s) render all white. I changed nothing in the code except the actual file itself. Maybe somebody could shed some light here. Thanks

Working CSS

#home-header {
background-image: url(firepit2.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 841px;
display: block;
}

Non working CSS

#home-header {
background-image: url(firepit2.psd);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 841px;
display: block;
}

I even tried saving the new file as a jpg to see if the issue was with the psd extension and it still did not work. Maybe I need to convert it?

2

Answers


  1. I think that if you want a show a image no background color, you can use format png, or other option for solve for example if you want change the color for your picture in focus, you can use javascript simple code.

    <img src="<?php echo $this->getSkinUrl("image.png"); ?>" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1" />
    
    Login or Signup to reply.
  2. Save the image as png if it has a transparency

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search