makertech81 makertech81 - 1 year ago 52
HTML Question

How do I rotate a background image without interacting with the whole entire site?

I am in the process of making a website in HTML and CSS. I have a background image of me on the Home page. Despite my wild efforts of trying to figure it out, nothing I have tried will work. I have tried to not include the background with the main "Body". To be more clear I will include a Chunk of my CSS code that I have been trying to rotate, but instead it rotates the Whole website.

.site-wrap {

min-height: 100%;
min-width: 100%;
background-color: white;
position: relative;
top: 0;
bottom: 100%;
left: 0;
z-index: 1;


padding: 4em;
background-image: url("/Users/tjle------/Downloads/IMG_2057.JPG");
background-size: 100%;

}


This is only some of the code, but the image comes sideways when excuted. When I tried to rotate it, it would rotate the whole website which is not supposed to happen. Should I try to make the background separate from the site wrap? Thanks! Sorry if the question is hard to understand, please tell me if it is.

Answer Source

Here is the solution :

HTML :

<body>
<div class="bcg"> <!-- this is your background-->
<img src="http://img.theepochtimes.com/n3/eet-content/uploads/2013/06/Canada-Goose-PhotosCom-139956551-Janet-Forjan-Freedman-676x450.jpg"/>
</div>

<!-- The rest of your page -->
</body>

CSS:

body,html{
width:100%;
height:100%;
margin:0;
}
.bcg{
  position:absolute;
  z-index:-1;
  width:100%;
  height:100%;  
  max-width:100%;
  max-height:100%;
  overflow:hidden;
}
.bcg img{
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg); //the angle of rotation
  margin:auto;
  width:100%;
  height:100%;  
  max-width:100%;
  max-height:100%;
}

And here is working fiddle : https://jsfiddle.net/vxj4u5dy/2/

But this is not perfect solution so I'd suggest you to rotate your photo in image editing program and then apply it to your web page as original ;)