0

I have created an HTML page and linked this to CSS. I have my background within the CSS file as follows:

body {
background-image:url('../Images/Bdos.jpg');
background-size:100%;
background-repeat:no-repeat;
background-attachment:fixed;
transform:rotate(90deg);
}

However, the transform:rotate(90deg) instead rotates the content in the HTML file. Any idea what may be the cause of the problem or what should be done to rotate the image alone??

Johannes
  • 64,305
  • 18
  • 73
  • 130
Darius
  • 1
  • It's simpler, to rotate `Bdos.jpg` in any image-editor, why are you try to rotate it with css? – Steven Jan 24 '18 at 23:39
  • The actual image file is fine, it's just imported at -90deg and it's not rotating using the transform:rotate. Instead, the text within the document is being rotated and the image is not being rotated no matter what I try. I hope I'm explaining it well enough. – Darius Jan 24 '18 at 23:55
  • When you upload the image, it's possible that your browser just show the cached one (you can get a fresh view with [ctrl]+[F5] in firefox or in chrome: https://superuser.com/questions/220179/how-can-i-do-a-cache-refresh-in-google-chrome), rename the image before you upload and change the name in your css can also help (in development, you can simply append `Bdos.jpg?=` and some unique string to force a fresh load). – Steven Jan 25 '18 at 00:01
  • Possible duplicate of https://stackoverflow.com/questions/5087420/how-to-rotate-the-background-image-in-the-container – Kamal Singh Jan 25 '18 at 01:53

3 Answers3

0

This is an approach, try it and come back if it still not work:

body {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 1000px;
}
body:before  {
    content: '';
    background: url('../Images/Bdos.jpg') 0 0 no-repeat;
    /*background-size: 100%;*/
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    position: absolute;
    z-index: -1;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
}

You must play with your resources, because the dimention of the image will cause differents results.

Yulio Aleman Jimenez
  • 1,642
  • 3
  • 17
  • 33
  • I forgot to mention that the image when applied is rotated at -90deg, so what I'm actually trying to do is to rotate the image to 90deg so that it'll display upright as it should have initially. I tried your way and the content still rotates leaving the image at -90deg. – Darius Jan 24 '18 at 23:29
  • @Darius In that case, just rotate it 270deg. – Rohan Shetty Jan 24 '18 at 23:41
  • That rotates the text alone, not the image. The image is what I am trying to rotate, but no matter what I try, it won't budge. – Darius Jan 24 '18 at 23:56
0

If you don't want the contents to rotate, but only the background image, just rotate the image in an image editor, save it and use that as your background image. It' not possible to rotate a background image without rotating the contents.

Johannes
  • 64,305
  • 18
  • 73
  • 130
0

thanks for all the help, but I just noticed the issue wasn't with the code, the image that I would have used was a picture that I had taken using a camera and I'm not sure what settings from the camera would have caused the issue.I tried a picture from online and everything is working just well. Thanks alot for all the assistance though, I greatly appreciate it. Cheers!

Darius
  • 1