Today I encountered a new issue. when I uploaded the image it shows rotated anticlockwise (-90deg). I thought it has issues with orientation so I tried adding this css image-orientation: from-image; but it doesn't worked.
HTML code:
<section class=" parallax-section content-parallax-section" data-scrollax-parent="true">
<div class="bg" data-bg="includes/images/bg/2.jpg" data-scrollax="properties: { translateY: '200px' }" style="background-image: url("includes/images/bg/2.jpg");"></div>
</section>
Related Css Classes
.bg {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
background-size: cover;
background-attachment: scroll;
background-position: center;
background-repeat:repeat;
background-origin: content-box;
}
section.parallax-section.content-parallax-section {
padding:150px 0;
}
original Image link: http://test.dvinsconceptzion.com/demo/includes/images/bg/2.jpg
webpage link: http://test.dvinsconceptzion.com/demo/about.php#sec5
It could be also after upload the image header having some issue. but I am not sure coz this is the first i am having issues with image orientation.
Thanks
This is usually connected to the image EXIF. There are some things you can do:
You could try removing it from the image (Windows):
- Right-click anywhere within the selected fields and choose “Properties.”
- Click the “Details” tab.
- At the bottom of the “Details” tab, you’ll see a link titled “Remove Properties and Personal Information.” Click this link.
- Windows will ask whether you want to make a copy of the photo with this information removed, or if you want to remove the information from the original. Choose the option you prefer and click “OK.”
You can use a tool to rotate it and save again in the same orientation (like Photoshop or even Windows image viewer);
Or you can modify your uploader to add an
exif_read_data()(if you're using PHP) to check the orientation and rotate it whenever needed. This answer could help: https://stackoverflow.com/a/34287543