hello im having some issues with the background image. if the webpage is opened full screen the whole img displays using this bit of code
.homeimg {
background: url(#);
background-repeat:no-repeat;
height: 800px;
background-size: cover;
background-size: 100%;
margin-top: -60px;
but then when the web browser is reduced in size the page retains the pixels but the image does not with the page smaller the img only covers a portion of the set pixels and the rest is replaced with white.
any help appeciated
Could you link your pen please?
Can’t because I’m using sublime text as with code pen i I can’t change the size of the window as well so I find it easier to use an external editor but here is a link to the file in my google drive https://drive.google.com/file/d/0B1GcdLAYETl1clpJVkpobm0zQ2M/view?usp=drivesdk
I apologize for doing it that way but I’m at work and I can’t get the problem out of my head thanks in advance
The issue was the height:500px in your home image div. This fixes it’s max height as 500px (not 100% of the screen because the background’s parent is the .homeimg div itself). To overcome this, I created a parent div placed directly within the body (and not your container), with height 100% and width 100% and enclosed the home image div inside it. It now covers the entire screen no matter what, which is what I hope you were trying to achieve.
I’m honestly not 100% sure why homeimg doesn’t just inherit body values directly, and I hope someone else helps out with this, but this works and I hope it helps.
Working fiddle: https://jsfiddle.net/imtoobose/y3hwcsoe/8/
EDIT1: Fixed some html errors, as you had extra and missing tags, and some attributes that don’t exist and replaced link with jsfiddle instead of codepen
EDIT2: Sorry the fiddle wasn’t public, now it is.
Thank you so much I’ll look into ur corrections in detail when I get out of work really appreciate it u went above and beyond