サイト全体とやり取りせずに背景画像を回転させるにはどうすればよいですか？

私はHTMLとCSSでウェブサイトを作っています。私はホームページに私の背景イメージを持っています。それを理解しようとする野生の努力にもかかわらず、私が試したことは何も働かないでしょう。私は主な「身体」の背景を含まないようにしました。より明確にするために、私は回転しようとしていたCSSコードのチャンクをインクルードしますが、代わりにWholeウェブサイトをローテーションします。サイト全体とやり取りせずに背景画像を回転させるにはどうすればよいですか？

.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%; 

}

これはコードのほんの一部ですが、画像は表示されたときに横向きに表示されます。私はそれを回転しようとしたとき、それは起こらなければならないウェブサイト全体を回転させるでしょう。背景をサイトラップとは別にしようとするべきですか？ありがとう！申し訳ありませんが、質問が分かりにくい場合は、教えてください。

出典

2016-05-08 makertech81

は、ソリューションです：

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

そして、ここではフィドルに取り組んでいる：https://jsfiddle.net/vxj4u5dy/2/

しかし、これはperfecではありませんあなたの写真を画像編集プログラムで回転させてオリジナルのウェブページに適用することをお勧めします）

出典

2016-05-08 18:56:53

私はしましたが、写真は横にHTMLで回転します。それはすべてを解決してくれてありがとう！ – makertech81

私は助けてうれしいです:) –

-2

画像をクラスに入れて、このクラスをCSS内で使用するだけです。ここで

<img src="yourURL" class="my-image" />

出典

2016-05-08 18:45:53 EQuimper

私はこの背景をCSSでどうやって作るのですか？それ以来、HTMLで。ありがとう！ – makertech81

htmlで空のdivをクラスで作成し、このdivの中に背景イメージを置くことができます。もっと簡単にjqueryを使っていますが、あなたはCSSとhtmlだけしか持っていませんか？ – EQuimper

はい、HTMLとCSSのみです。ええと、私は感謝します！ – makertech81

サイト全体とやり取りせずに背景画像を回転させるにはどうすればよいですか？

答えて

関連する問題