Help with portfolio. Cant figure out main photo

I’ve started on the portfolio page for the beginner front end development section, but I cant get past this issue. The main image I have on there is scaling super weird and I dont know how to fix it. When I have the site on full screen, everything is dandy. But when I zoom in or out, the contents of the image shift up/down respectively. I want to place a header like “Hi, I’m kevin” over the main picture, but if I cant figure out how to keep the actual image static, Im going to have to figure something else out.

Anyways, this probably makes no sense. So ill drop a link to my codepen. Go to full screen and zoom in and out and youll see what I mean.

Sorry, I can’t see what you’re trying to do. I can’t even see your image. I might suggest figuring this out before moving on - you have so many things going on that you can’t isolate the problem.

As far as having a background image (if I understand you correctly) I recently did a page where I used this in the css:

body { 
	background: url('images/BG.jpg') no-repeat center top fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	min-height: 100%;

Maybe it’ll work for you. Or if you can do a simplified test of concept and ask a specific question about that, maybe we can give you a better answer.

The image isnt showing up for you? Weird. But thanks for your response! It gave me a totally different(and obvious) idea for a fix. Once I get it fixed and going i’ll let everyone know

Oups, it looks you have change the html when i am looking at it, the img tag disappears. Any way ksjazzguitar is right, you img src is broken, not working!!

Can you see it off this link?

No kevin, the problem is with your src attribute, something must be wrong with it so you need to check!

Alright try again. I switched where I was hosting the image.

OK, I can see the image. But what do you want it to do that it is not doing?

If you want to position several related elements you should use a container. Just make a div that groups all these different elements (make a div and put them all inside).

After that you can position them using margins, padding, margin:auto+a set width in % if you want to center something, setting the width of inner elements with %s, or using position relative + position absolute on child elements if you need to place them in somewhere more specific.

CSS properties you should take a look at:

  • display
  • position
  • width
  • margin
  • padding
  • and their units (pixels, percentages, etc)

For resizing you can use %s, bootstrap’s responsive classes (img-responsive, col- classes), or/and these things called media queries.