Help with my portfolio page

Code Feedback
1

HI everyone, I’ve just started putting together my portfolio page…and I’m stuck quite early on.

I’m using the jumbotron bootstrap class. How do I make the background image full size? I’ve tried cover but think that just sets the width. I can increase the height by manually entering the number of pixels…but is there a way to automatically set the height to the full height of the background image?

code is here http://codepen.io/mattsatonacat/pen/NrRvQv

Thanks for your help!

2

I can’t give your code a thorough look over since I’m on mobile, but it sounds like you’ll want to use fill instead of cover. The issue is probably that your image is a different aspect ratio from the container you’re trying to put it in. Using fill will make sure your background is fully covered by the image but will also crop out some of it. It’s possible to force the background image to always be the same size as the container, but it’s going to look stretched and warped.

3

Hey,
I am not so sure what the problem is but if you are trying to get a background image you can do the following in your body tag:

add background attribute to your body tag like < body background = 'bgimage.jpg">

Link: http://www.w3schools.com/tags/att_body_background.asp

Hope this helps and remember Read-Search-Ask

Cheers,
Ashish

4

Try the following CSS:
/* For Static Background Image*/
background: url("…/laptop-4.jpg") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

The WebKit/moz stuff is for backward compatibility.

5

This is a really good start.
You have to add bootstrap.js to the javascript in settings for bootstrap to work properly.
If you go to this page you can see how to get a hamburger style menu working - http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp
Keep going!

6

Hi everyone, thanks for all the comments! I think I fixed the background image problem. And GregatGit thanks for the tips on bootstrap. I’ve just posted a link to the page again on another thread as I’ve got it to a point I’m reasonably happy with it. Need to work on how responsive it is as when I load it on my phone it looks pretty horrendous!!