[14-15] Responsive background image from <img>

·

1 min read

Week №14:

  • Trying to code landing page with HTML/CSS "on my own".
  • Had a headache with decorators and forwarding, call/apply topic.
  • Spent three days making a smooth, animated hamburger menu.
  • Going to finish freecodecamp course after finishing current project. Think, it'll help to hone my skills.
  • Updated my roadmap and checklist of weak spots. Very useful if you're learning on your own. Helps to avoid feeling that you're missing something in your learning.
  • Found, studied and implemented JS script which helps to make responsive background image from HTML tag img:

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

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

Week №15:

  • Procrastination.