Вход

Просмотр полной версии : Как задать фон блоку картинкой, путь к которой указан в дочернем блоке?

engenes
22.02.2016, 01:12
Написал вот такой скрипт но фон вставляется везде одинаковый, а мне нужно чтобы у каждого родителя был фон, путь на который указан у дочернего блока.
var width = document.documentElement.clientWidth,
height = width / 3,
bg = $('.views-field-nothing').find('.views').html();
bg = "url('" +bg+ "')";
//$(".views-field-nothing").attr("<img src=", bg);

$(".views-field-nothing").css('background', bg);

$(".views-field-nothing").css('height', height);
$(".views-field-nothing").css('width', width);
.views-field-nothing {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="views-field-nothing">
<div class="views">http://goodimg.ru/img/tsvetochek-risunok3.jpg</div>
</div>
<div class="views-field-nothing">
<div class="views">http://agu-shop.ru/images/pink_flower_512x512.png</div>
</div>
<div class="views-field-nothing">
<div class="views">http://www.raskraska.ru/counting/flower-bw.gif</div>
</div>
рони
22.02.2016, 01:50
engenes,
<!DOCTYPE HTML>

<html>

<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.views-field-nothing {
border: 1px solid red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script>
$(function(){
var width = $("html").width();
height = width / 3;
$(".views-field-nothing").each(function(indx, el){
var bg = el.textContent;
bg = "url(" +bg+ ")";
$(el).css({'backgroundImage': bg, 'height' : height, 'width': width})

});

})
</script>
</head>

<body>



<div class="views-field-nothing">
<div class="views">http://goodimg.ru/img/tsvetochek-risunok3.jpg</div>
</div>
<div class="views-field-nothing">
<div class="views">http://agu-shop.ru/images/pink_flower_512x512.png</div>
</div>
<div class="views-field-nothing">
<div class="views">http://www.raskraska.ru/counting/flower-bw.gif</div>
</div>
</body>

</html>
engenes
22.02.2016, 02:19
engenes,
<!DOCTYPE HTML>

<html>

<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.views-field-nothing {
border: 1px solid red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script>
$(function(){
var width = $("html").width();
height = width / 3;
$(".views-field-nothing").each(function(indx, el){
var bg = el.textContent;
bg = "url(" +bg+ ")";
$(el).css({'backgroundImage': bg, 'height' : height, 'width': width})

});

})
</script>
</head>

<body>



<div class="views-field-nothing">
<div class="views">http://goodimg.ru/img/tsvetochek-risunok3.jpg</div>
</div>
<div class="views-field-nothing">
<div class="views">http://agu-shop.ru/images/pink_flower_512x512.png</div>
</div>
<div class="views-field-nothing">
<div class="views">http://www.raskraska.ru/counting/flower-bw.gif</div>
</div>
</body>

</html>
а в рамках моего скрипта поправить не сможете?
это я простой пример написал, но ведь в моем блоке еще и другой текст будет и другие блоки, я просто не стал код захламлять, хотел чтобы тут на чистом примере показали, как это работать будет. Я предполагаю, что где то нужно this вписать что то вроде "возьми текст из дочернего блока "background"и сделай его своим фоном". Но как и куда это вписать не знаю.
dismantled
22.02.2016, 06:07
Я предполагаю, что где то нужно this

Ответил вам с "this", в рамках вашего скрипта, в дубликате вашего поста (http://javascript.ru/forum/misc/61518-javascript-kak-zadat-fon-bloku-kartinkojj-put-k-kotorojj-ukazan-v-dochernem-bloke.html).