makertech81 makertech81 - 6 months ago 11
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

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

Comments