2016-05-08 6 views
0

Ich bin dabei, eine Website in HTML und CSS zu erstellen. Ich habe ein Hintergrundbild von mir auf der Startseite. Trotz meiner wilden Bemühungen, es herauszufinden, wird nichts, was ich versucht habe, funktionieren. Ich habe versucht, den Hintergrund nicht mit dem Hauptteil "Body" zu verbinden. Um klarer zu sein, werde ich einen Teil meines CSS-Codes einbeziehen, den ich zu drehen versuche, aber stattdessen dreht er die gesamte Website.Wie drehe ich ein Hintergrundbild, ohne mit der gesamten Website zu interagieren?

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

} 

Dies ist nur ein Teil des Codes, aber das Bild kommt seitwärts, wenn es ausgeführt wird. Wenn ich versuchte, es zu drehen, würde es die ganze Website drehen, die nicht passieren soll. Sollte ich versuchen, den Hintergrund vom Seitenumbruch zu trennen? Vielen Dank! Tut mir leid, wenn die Frage schwer zu verstehen ist, bitte sagen Sie mir, wenn es so ist.

Antwort

2

ist die Lösung:

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

Und hier arbeitet Geige: https://jsfiddle.net/vxj4u5dy/2/

Aber das ist nicht perfec t Lösung, also würde ich vorschlagen, dass Sie Ihr Foto im Bildbearbeitungsprogramm drehen und es dann auf Ihre Webseite als Original anwenden;)

+0

Ich tat, aber das Foto würde seitwärts in HTML neu drehen. Danke es hat alles gelöst! – makertech81

+0

Ich bin froh, zu helfen :) –

-2

Setzen Sie einfach Ihr Bild mit einer Klasse und verwenden Sie diese Klasse in Ihrem CSS. Hier

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

Wie würde ich dies meinen Hintergrund in CSS machen? Seit seiner im HTML. Vielen Dank! – makertech81

+0

Sie können ein leeres Div mit Klasse in HTML erstellen und Ihre Hintergrundbilder in dieses Div einfügen. Einfacher ist es mit jquery, aber Sie haben nur CSS und HTML nicht? – EQuimper

+0

Ja, nur HTML und CSS. Ähm, ich werde es versuchen, danke! – makertech81