[14-15] Responsive background image from <img>
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.