Hello everybody, I was playing with a template from the w3.css templates from w3 schools and found an issue that I can't get around. In the template called Parralax template or the forth one from top, with the man with grey hat, I saw that the home screen image was loaded from the css
I wanted to do a transition between two images but only found examples on the web that it is possible only when the image is loaded from an html image tag, so I removed the "background-image" from the above css code and added an <img src="/w3images/parallax1.jpg"> tag under the div where the class name was bgimg-1:
<!-- First Parallax Image with Logo Text --><divclass="bgimg-1 w3-display-container w3-opacity-min"id="home"><imgsrc="/w3images/parallax1.jpg"><divclass="w3-display-middle"style="white-space:nowrap;"><spanclass="w3-center w3-padding-large w3-black w3-xlarge w3-wide w3-animate-opacity">MY <spanclass="w3-hide-small">WEBSITE</span> LOGO</span></div></div>
However, the image now has an empty white space from it's right side and I can't make it full. Does anybody know how to fix that?
w3 schools template showing image differently when loaded from an html tag
in CSS
Posted
Hello everybody, I was playing with a template from the w3.css templates from w3 schools and found an issue that I can't get around. In the template called Parralax template or the forth one from top, with the man with grey hat, I saw that the home screen image was loaded from the css
(from the style brackets after the head tag )
I wanted to do a transition between two images but only found examples on the web that it is possible only when the image is loaded from an html image tag, so I removed the "background-image" from the above css code and added an <img src="/w3images/parallax1.jpg"> tag under the div where the class name was bgimg-1:
However, the image now has an empty white space from it's right side and I can't make it full. Does anybody know how to fix that?