Help with portfolio. Cant figure out main photo

1

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.

2

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.

3

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

4

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!!

5

Can you see it off this link?

http://s.codepen.io/Kevinallen/debug/yMPgPR/xnMabdzZYLYr

6

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

7

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

8

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

9

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.