Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Evan Modiste
PLUS
Evan Modiste
Courses Plus Student 6,131 Points
Posted by Evan Modiste
Evan Modiste
Courses Plus Student 6,131 Points

I am having a problem loading a background-image with hardcover book dimensions to the left of an article I wrote.

HELP!

I am trying to replicate this style, but with an image link to my PDF article: http://www.aspeninstitute.org/events/sanfran

<!-- BEGINNING OF ARTICLE SELECTIONS -->

            <div class="primary-content col">  
                <a href="../img/Prototype.jpg" target="_blank"></a>

            </div>
            <div class="secondary-content col">
                <span class="title">TITLE: <i>Prototyping: Killing Ideas 'Til They Thrive</i></span>
                <h5>Date: April 2015</h5>
                <p>Every disruptive technology starts with a prototype. The design firm, IDEO, who created the one-button mouse for Apple says, "fail early to succeed sooner". Prototyping is important, and its value can be revealed in three key points: the customer, the environment, and the bottom line.</p>
            </div>

/* CSS RULES */
.col {
   display: inline-block;
    margin-right: -5px;
    vertical-align: top;
}

.primary-content {
    width: 20%;
    background-image: image(../img/Prototype.jpg);
    background-size: cover;
}

.secondary-content {
    width: 80%;
}

2 Answers

larryw
larryw
23,851 Points
larryw
larryw
23,851 Points

Hi Evan,

You have a typo in your background-image property. The value should be url(../img/Prototype.jpg). Also, you need to have a height property in the .primary-content div in order for the background-image to display. You can change the dimensions using the background-size property (instead of setting it to cover). You might also want to use background-repeat: no-repeat.

.primary-content {
    width: 20%;
    height: 100px;
    background-image: url(../img/Prototype.jpg);
    background-size: cover;
}
Evan Modiste
PLUS
Evan Modiste
Courses Plus Student 6,131 Points
Evan Modiste
Evan Modiste
Courses Plus Student 6,131 Points

Thank you larryw,

Super helpful. I can now drop images in to the desired location through CSS. The height property filled my no-show issue. The url(../img/Prototype.jpg); is still giving me problems, but that is a file location error. Thanks very much larryw!

  • Evan