Background not positioned properly, text not importing, rollover effects?

Question

Hey guys I'm still working on the same web mockup design for a friend and I am trying to figure out a few things so I know for the future.

First off, the background image is not positioned properly (and I know if I change it from fixed it will be, but I want that scrolling effect). Code is:

.jumbotron {
background:url("http://i.imgur.com/5zm8SAo.jpg") no-repeat center center fixed;
background-size: cover;
height: 500px;
}

If I mess with the background size, then the dimensions don't fit with the website.

1. I uploaded a font from my computer (I don't have a server set up yet) to a public font generator website as an OTF file, and I had it running on my computer when I was working on it last night but now from my office computer, the font shows up at default. Is there a workaround? or do I need a server?

2. I want to add some rollover effects to the pictures at the bottom, enlarge in general them a bit, fade out and add text, similar to the reigningchamp website (scroll to bottom, not enough rep to post two links?!?) So this code works:

      <div class="col-md-4">
          <div class = "grow">  
               <div class="thumbnail">
                   <img src="#" />
                 </div>
               </div>
           </div>
   .grow {
   display: inline-block;
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
   -webkit-transition-property: transform;
   transition-property: transform;
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    }
    .grow:hover, .grow:focus, .grow:active {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    }
   

Also since I am using the bootstrap framework, when I try to enlarge the thumbnails from calling the class thumbnail, nothing changes how do I make the images bigger but still in the line they are in?

1. And One LAST Thing is a general question on how to make the formatting of the site adjust to browser window, mobile, etc. so the font doesnt run on the page or the logo at the top gets misplaced? This might have to do with javascript which I've been working on learning through codeacademy(but so far its all these games and random functions, not website functionality). If you make the window smaller, the nav menu text runs onto the .jumbotron div.

Thanks guys, I know its a lot, but hopefully someone can help me with one of these!!

**Here's the JSFiddle** http://jsfiddle.net/thedonmon/KZ7d8/5/

Answer 1

Yes the OTF files need to be on the server if you are going to be accessing them from different machines. You should have them loaded on the server so that everyone can see them, not just on your local machine. Unless they are taken from Google-fonts, you can use their API.. https://www.google.com/fonts

As for the for images part, I created a fiddle for you: http://jsfiddle.net/sburke0708/KZ7d8/18/ I think what you are looking for is the -webkit-transform: properties. Make sure you add the others prefixes for the inclusion of other browsers.

The last part you want to check out media queries. These re-size your content specific to your needs. Check out https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries Media queries typically go at the end of your CSS to resize specific elements to avoid this problem.