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);
}
-->
1 Correct answer
7
Replies
AdChoices