Copy link to clipboard
Copied
Dreamweaver CC version 19.2.1
I am trying to put a background image on my page, and it shows up roted 90 degrees to the left. I have used Photoshop to rotate the image to the right 90 degrees in hopes of it showing correctly. No matter what version of the photo I use, it shows up incorrectly. I tried using the CSS transform rotate() property, with 90deg as the attribute, to no avail. I used all the different transform rotate variations, -webkit, -moz, etc... and it does not work either. I've tried placing the background image in both the body section and the HTML section. Any ideas why it won't display the image correctly?
HTML File:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test_1</title>
<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.button.min.css" rel="stylesheet" type="text/css">
<link href="Test.css" rel="stylesheet" type="text/css">
<script src="jQueryAssets/jquery-1.11.1.min.js"></script>
<script src="jQueryAssets/jquery.ui-1.10.4.button.min.js"></script>
</head>
<body>
<button id="Button1">Button</button>
<script type="text/javascript">
$(function() {
$( "#Button1" ).button();
});
</script>
</body>
</html>
CSS File:
@charset "utf-8";
body {
background-color: #000033;
background-repeat: no-repeat;
background-attachment: fixed;
width: 100%;
background-size: auto auto;
background-image: url(_images/missoula_mountain.jpg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
<!--html {
width: 100%;
background-repeat: no-repeat;
background-image: url(_images/missoula_mountain_1.jpg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
-->
Without seeing the live page, I'm going to guess the picture was taken with an incorrectly held iPhone or iPad. Image rotation is compensated for by native software in those devices only but not when the image is used online.
Solution:
Open your image in Photoshop.
Go to File > Export > Export As. Scroll down to Metadata and set it to None. Then click on Export All button. Your new image will no longer display rotated.
Copy link to clipboard
Copied
It looks like you need to fix the image header (meta data). For more see https://meta.stackexchange.com/questions/209652/why-was-this-uploaded-image-rotated-90-degrees
Copy link to clipboard
Copied
Without seeing the live page, I'm going to guess the picture was taken with an incorrectly held iPhone or iPad. Image rotation is compensated for by native software in those devices only but not when the image is used online.
Solution:
Open your image in Photoshop.
Go to File > Export > Export As. Scroll down to Metadata and set it to None. Then click on Export All button. Your new image will no longer display rotated.
Copy link to clipboard
Copied
The photo was taken with a Samsung tablet in portrait position. I only have Photoshop CS4, and the only choices under "export" are:
Datasets as files (greyed out)
Paths to Illustrator
Render Video (greyed out)
Zoomify
This was just an exercise I was doing to practice using a background image. It is not the actual photo I will use. The photo I will most likely use (ironically, taken with an iPhone) does show up correctly.
I'm going to mark this as the correct answer to close this. I appreciate your help.
Copy link to clipboard
Copied
On top of what the others have said, if you are previewing in Chrome, you may also be affected by a sticky cache that's showing you your uncorrected image from memory. Once you follow Nancy's advice, also be sure to clear Chrome's (or any other browser's) cache and verify you are seeing the most up to date image.
Copy link to clipboard
Copied
I did try that. Still showing rotated. I test in IE, MS Edge, Chrome, Firefox, and OPera. Same in all of them.
Copy link to clipboard
Copied
All we can do is guess at what could possibly be the isse, and that particular guessing game has already taken 4 days.
If you could upload the page, the image, and any scripts or css files that pertain to it to a test location on your server and post the link here in the forum, one of the contributors could likely have your problem solved in a few minutes.
Copy link to clipboard
Copied
Did you remove all that rotation junk from your CSS and re-upload that script to your server?
Can you insert just the new image here in this web forum? Don't use e-mail, it won't come through.