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
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.
Save the image as png if it has a transparency