Wie drehe ich ein Hintergrundbild, ohne mit der gesamten Website zu interagieren?

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.

Quelle

2016-05-08 makertech81

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

Quelle

2016-05-08 18:56:53

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

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" />

Quelle

2016-05-08 18:45:53 EQuimper

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

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

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

Wie drehe ich ein Hintergrundbild, ohne mit der gesamten Website zu interagieren?

Antwort

Verwandte Themen