Portfolio Issue

1

Hello everyone,
I am having issues with my portfolio.
When i code it in codepen the background image is cropped but when I copy that same code to my live site everything is fine. Is theresomething in codepen that would cause this, if so how do I work around it?

Live Site: http://jasondangelo.com/

Codepen: http://codepen.io/jasondangelo4life/full/mRZWVp/

Thank you

2

I put everything in body tags. Then made a css for the body:

body {
    background:  url("http://jasondangelo.com/img/Portfolio1.jpg")
 no-repeat center center fixed;
  background-size: cover;
  position: relative;
}

This got it to work for me. I find that codepen acts weird if I don’t automatically link all the files.
Example of older portfolio: Portfolio

3

change .intro width size from 100% to 100vh

4

Hey Jason,

I wouldn’t worry about it too much as it seems to be a quirk in CodePen.

I would point out that when using percentages in CSS, the percentage is based off of the parent container. Because you have no container outside of your intro div, it is basing its width: 100% height 100% off of the window.

You’ll notice that if you readjust the height of your browser window and hit refresh, your “Hello world!” will always be just out of view. That’s because whatever the height is, your “intro” div is taking up 100% of it.

I would put a height other than 100% on that div, so your content doesn’t get pushed so far down.