2016-04-13 10 views
0

Ich habe eine Vorlage von jemand anderem geschrieben, und sie haben ein Bild in der CSS als backgound Bild wie so verwendet.Move CSS backgroundImage zu einem HTML-Element

.block-title__inner:after { 
    background-image: url('../media/bg/11.jpg'); 
} 

Ich verwende diese Vorlage in einem CMS und muß es auf einen einfachen img-Tag ändern, damit ich das Bild im Backend verwendet ändern kann.

So anstelle des HTML

<div class="block-title__inner "></div> 

sein Es wäre zu

<div class="block-title__inner"> 
    <img src="../media/bg/11.jpg"/> 
</div> 

Ive herum, aber entweder nichts da draußen gesucht ändern oder Im nicht die richtigen Begriffe verwenden, eitherway ich etwas finden kann nicht herum, wie man das macht, also wäre jede Hilfe großartig.

+0

Ist die div dynamische Größe oder statisch? Kannst du mehr Details teilen? –

+0

haben Sie versucht, Inline-Stile zu verwenden? – TechTreeDev

+0

Ich möchte nicht wirklich Inline-Stile verwenden, würde lieber die CSS/HTML in ihren jeweiligen Bereichen behalten, es sei denn das ist der einzige Weg, dies zu tun. –

Antwort

2

Diese Antwort wurde aufgrund neuer Informationen und editiert:

Die Website in Frage: headyherps.azurewebsites.net/available/adult/gregory

Statt mit einem Hintergrund-Bild CSS-Eigenschaft als Thema durch getan hat Standardmäßig möchten Sie stattdessen ein IMG-Tag in das übergeordnete Element einfügen, da dies der beste Weg ist, den Inhalt zu verwalten.

Also, Ihr HTML sieht ungefähr so ​​aus:

<div class="block-title__inner section-bg section-bg_second"> 
    <img src="../media/bg/11.jpg" alt="" /> 
    <div class="bg-inner"> 
     <!--header elements--> 
    </div> 
</div> 

Um nun das img in ähnlicher Weise auf die Eigenschaft background-position wir einige CSS-Eigenschaften, um es anwenden müssen verhalten zu bekommen.

.block-title__inner img{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: auto; 
    height: auto; 
    min-width: 100%; 
    min-height: 100%; /* optional fail-safe for images that are too short */ 
} 
+0

Ja, ich kann mit dem Code machen, was ich will, es ist nur eine Vorlage, die ich von TF gekauft habe. Ich habe nur keine Ahnung von CSS, weshalb ich eine von woanders habe, leider sind alle Bilder in CSS gesetzt, weshalb ich sie verschieben muss :( –

+0

Warum nicht das CSS entfernen, das das Hintergrundbild deklariert? Sonst: bedenken eine wichtige CSS-Regel hinzufügen: .block-title__inner {background-image: none! wichtig;} – EoghanTadhg

+0

Ja, ich habe die CSS-Deklaration entfernt, aber ich muss das Bild in der HTML-Datei haben, so dass es immer noch –

1

Ich denke, so etwas würde mit Inline-Stilen funktionieren.

<div style="background-image: url(../media/bg/11.jpg)"></div> 

Sie können auch jQuery verwenden:

$(function(){ 
     $('.block-title__inner').css("background", "url(../media/bg/11.jpg) "); 

    }); 

Vergessen Sie nicht, es zu schließen in Ihrem <head>

Eine weitere Option ist ein Skript zu schreiben, die mit dem src den Eltern Stil ändert

https://jsfiddle.net/cdmp22ay/2/

1

Wenn Sie das Markup halten das gleiche wie:

<div class="block-title__inner"></div> 

Sie können die img src aus der CSS-Klasse erhalten angebracht mit jQuery und die div mit einem Bild anhängen.

var bg = $('.block-title__inner').css('background-image'); 
bg = bg.replace('url(','').replace(')',''); 
console.log(bg); 
$('.block-title__inner').append('<img id='theImg' src="' + bg + '" />');