I am trying to put a image in a box with CSS

Question

I am trying to put a image in a box I made in CSS.
I am trying to make a page similar to http://www.igshoutouts.com/ where I have a box for each Instagram page. So far I have managed to make the boxes but I am having trouble with- 
1. Putting a image in each box
2. How it links up with instagram so it shows the amount of followers, posts etc on each page.
Below is the code I did to make the boxes and repeated it 9 times for each of my Instagram pages.
.box {
    float: left;
    color: black;
    font-size: 26px;
    text-align: center;
    background-color: white;
    width: 280px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 30px;
    padding: 5px;
    border: 2px solid black;
    height: 400px
Kind regards
John

John Levy · Answer

Thanks for your help, I just managed to sort it out.

Steven Parker · Answer

You didn't share your HTML, but I'm guessing the items with class box are div elements.
You can either put img elements inside them for your photos, or do like your sample website and apply background-image properties directly to the div with CSS.
Now to display data from another website like followers and posts will require either a program running on the server or some JavaScript that you load into the browser.  I've not used it myself, but facebook offers a Web SDK (https://developers.facebook.com/docs/javascript) that might be useful for creating this kind of functionality.

Welcome to the Treehouse Community

Looking to learn something new?

John Levy

John Levy

I am trying to put a image in a box with CSS

2 Answers

Steven Parker

Steven Parker

John Levy

John Levy