Portfolio challenge help

Portfolio challenge help
0

#1

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


#2

Could you link your pen please?


#3

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


#4

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


#5

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.


#6

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