Background image rotated itself 90deg [closed]

Question

I added an background image inside a container that was smaller than the image. It was part of the plan. Even though it automatically rotated itself 90deg, without me touching anything (there was 3 other boxes with the exact same settings, not the same image though.). Any idea how to fix that, or what it is happening?

EDIT: Issue solved, Kyle Shrader told me to use and EXIF tool, which I did. That told me the photo was rotated 90 degree, in the metas, even though it looked fine front end. I used an exif editor and put it on Horizontal (normal value for a photo) instead of Rotated 90 CW.

Answer 1

If the image has EXIF orientation set, some browsers will interpret this and automatically rotate the image. You can use a tool like EXIF Data Viewer to quickly check that this is not the case for you.

If this is the case, you can solve the issue in your style sheets or in the image file itself.

To solve this problem with CSS, use the image-orientation css property to set your image orientation. image-orientation: 0deg; is what you could use, in your case.

To remove the EXIF tag from the file, you can use a tool like theXifer EXIF Purge

edit: replaced the originally linked online solution with an offline solution. With each there are concerns. Online solutions pose an issue to leaking company information or assets. Obviously you should only use trusted offline solutions, since this could pose a security risk. Thank you for the recommendation, @TomerOfer