Need help with text on a picture

1

I hope someone can help. I would like to get the writing on top of the picture and have it centered?

Also, how can i make the image smaller but keep it’s proportions?

Here is the code: http://codepen.io/timmparsons/pen/dpKWJG

Thanks for your help

2

I forked your pen and made a few changes - scroll down to the styling for the #welcome div and read the comments http://codepen.io/GraceNut/pen/pEKPQq?editors=1100

if you take a look, you’ll see that I think you should get rid of the .background div and just add the background through CSS… the reason for that is that usually you don’t want to use an image in your HTML unless it is providing meaning to the page, whereas a CSS background image is just there for looks.

So, if you were doing a tribute to someone, and you added a picture of them on the site, you’d put the picture in the HTML, because you’re showing people what the person looked like (which is meaningful). On the other hand, a background image that’s just there for looks is a fine thing to have, but it isn’t informational, so it should be in the CSS.

3

That’s awesome, thank you much. My problem was getting the text to move down without the whole image moving too. What does the ‘vh’ mean?

Thanks

4

“vh” is the “viewport height” unit. Basically, every vh is 1% of the screen, so if you have something that’s got height: 60vh, then the browser will measure the height of the screen, and make the element be 60% of that tall… and if it were height: 100vh, then it would just be the size of the entire screen

here’s a link to an article that talks about all the random CSS sizing units you can use: https://css-tricks.com/the-lengths-of-css/#article-header-id-12

5

Thank you.

How would I keep the navigation bar and logo in place as I scroll? I tried putting them in a div id and position fixed but it pushed the welcome section up. I also tried giving the welcome a top margin and navigation a white background but the nav bar had shifted to the left and just created a white bar about 3 quarters width over the welcome picture.

Thanks

6

sounds like you are really close to getting it. What you want to do is give the header position: fixed like you already tried, along with width: 100% (which will fix the issue with the navbar not going all the way across the screen) and background-color: white, but an important thing here is that you also add top: 0 so that the bar will actually be at the very top

…then if you go and add a top margin of 100px or so to the #welcome div, everything should look about right

my updated pen, is this the effect you’re looking for? http://codepen.io/GraceNut/pen/pEKPQq?editors=1100

7

that’s much better, thanks.

On another page, i created an unordered list but it’s somehow changed to be side by side rather than downwards. Do you have any thoughts or would you need to see the CSS?

8

hey, if you haven’t already figured this out, I can’t tell for sure without seeing the CSS, but if I had to guess I’d say that that is probably caused by having this somewhere

li {
  display: inline;
}