Застосування класу "ibg"
- Налаштування Sublime Text 3
- Шаблон заявки на замовлення
- CSS властивість background
- CSS властивість position
- Шпаргалка з FLEX
- Одиниці вимірювання CSS
- Застосування класу "ibg"
- CSS властивість transition
- Animation та @keyframes
- Шпаргалка Slick Slider
- Шпаргалка CSS Transform
- Шпаргалка CSS Grid
- Gulp сценарій
- Зарезервовані слова JS
CSS:
.ibg{
background-position: center; background-size: cover; background-repeat: no-repeat; position: relative;}
.ibg img{
width: 0; height: 0; position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden;}
Чистий JS:
function ibg(){
let ibg=document.querySelectorAll(".ibg"); for (var i = 0; i < ibg.length; i++) { if(ibg[i].querySelector('img')){ ibg[i].style.backgroundImage = 'url('+ibg[i].querySelector('img').getAttribute('src')+')'; } }}
ibg();
jQuery:
function ibg(){
$.each($('.ibg'), function(index, val) { if($(this).find('img').length>0){ $(this).css('background-image','url("'+$(this).find('img').attr('src')+'")'); } });}
ibg();