Highlighted

Background image shows up rotated 90 degrees

New Here ,
Jan 17, 2020

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);
}
-->

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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.

 

TOPICS
Code, How to

Views

1.4K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Background image shows up rotated 90 degrees

New Here ,
Jan 17, 2020

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);
}
-->

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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.

 

TOPICS
Code, How to

Views

1.4K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 17, 2020 0
Adobe Community Professional ,
Jan 17, 2020

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


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 17, 2020 0
Adobe Community Professional ,
Jan 18, 2020

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.

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 18, 2020 0
New Here ,
Jan 21, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 21, 2020 0
Adobe Community Professional ,
Jan 20, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 20, 2020 2
New Here ,
Jan 21, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 21, 2020 0
Adobe Community Professional ,
Jan 21, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 21, 2020 0
Adobe Community Professional ,
Jan 21, 2020

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.

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 21, 2020 0