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

Posted by Alita Edmonds
Alita Edmonds
6,068 Points

How can I make my image display the full width of my background?

I have a background for my blog posts. One of my images is in the posts and I want it to display the full width of the posts, with a little of the background showing on the edges. I am currently using max-width and max-height but I cant seem to increase the length. How can I do this? What property would I use? Thanks for the help!

5 Answers

Alita Edmonds
Alita Edmonds
6,068 Points

I have fixed my problem now. I just added padding.

Alita Edmonds
Alita Edmonds
6,068 Points

Oh that's fine! I don't think I was explaining very well what i wanted.

Alita Edmonds
Alita Edmonds
6,068 Points

Thank you for your help!

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

I'm guessing, but you might want the "background-size: cover;" setting in your CSS.

For a complete analysis and more specific answer, show your actual code (preferably with a workspace "snapshot").

Alita Edmonds
Alita Edmonds
6,068 Points

Thanks Steven! But thats not quite it. When I set that property, it took up a lot of space on my page. I can't do a workspace snapshot but I will show my CSS and HTML. Will that help? Here is my code. '''HTML <div class="blog-gallery"> <section class="blog-posts"> <img src="img/flowers.jpg" alt="Photo of flowers"> <p>Um, how pretty are these flowers? Really pretty. I could look at these all day!</p> </section>

    <section class="blog-posts">
        <h2>My Second Blog Post</h2>
        <p>This is my first blog post. How is it? Do you like it? Contact me at alita.edmonds@gmail.com.This is my first blog post. How is it? Do you like it? Contact me at alita.edmonds@gmail.com.This is my first blog post. How is it? Do you like it? Contact me at alita.edmonds@gmail.com</p>
    </section>
    <section class="blog-posts">
            <h2>My First Blog Post</h2>
            <p>This is my first blog post. How is it? Do you like it? Contact me at alita.edmonds@gmail.com.This is my first blog post. How is it? Do you like it? Contact me at alita.edmonds@gmail.com.This is my first blog post. How is it? Do you like it? Contact me at alita.edmonds@gmail.com</p>
    </section>
    </div>

''' '''CSS .blog-gallery { margin: 100px; }

.blog-posts { padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px;

background: white; border-radius: 10px; box-shadow: 0 5px 1px rgba(0, 0 , 0, .100);

display: inline-block; max-width: 30%; height: 60%; box-sizing: border-box;

margin: 20px; }

img { background-size: cover; } ''' Thanks again!

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

I wasn't able to replicate your situation because I didn't have the image itself. But the code shown here isn't using a background. The image is part of the foreground using an "img" tag.

To give it a background instead, remove the "img" tag and use this CSS:

.blog-gallery {
  margin: 100px;
  background: url(img/flowers.jpg);  /* use image as background */
  background-size: cover;
}

Bonus hint: when the padding in all directions is the same, you can specify simply "padding" instead of setting each direction individually.

Alita Edmonds
Alita Edmonds
6,068 Points

Ops! I forgot to add these CSS things: '''CSS

.blog-posts { padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px;

background: white; border-radius: 10px; box-shadow: 0 5px 1px rgba(0, 0 , 0, .100);

display: inline-block; max-width: 30%; height: 60%; box-sizing: border-box;

margin: 20px; }

Hmm, and it still isn't working. Maybe the code up there is keeping it from doing that. Oh and by the way, I would like the image to only display on some of the blog posts.

<div class="blog-gallery"> <section class="blog-posts"> <img src="img/flowers.jpg" alt="Photo of flowers"> <p>Cute Flowers!</p> </section>

<section class="blog-posts">
    <h2>My Second Blog Post</h2>
    <p>This is my first blog post. How is it? Do you like it? Contact me at alita.edmonds@gmail.com.This is my first blog post. How is it? Do you like it? Contact me at alita.edmonds@gmail.com.This is my first blog post. How is it? Do you like it? Contact me at alita.edmonds@gmail.com</p>
</section>
<section class="blog-posts">
        <h2>My First Blog Post</h2>
        <p>This is my first blog post. How is it? Do you like it? Contact me at alita.edmonds@gmail.com.This is my first blog post. How is it? Do you like it? Contact me at alita.edmonds@gmail.com.This is my first blog post. How is it? Do you like it? Contact me at alita.edmonds@gmail.com</p>
</section>
</div>
Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

I'm not seeing the difference, that seems to be the code you posted before (except missing the "blog-gallery" rule).

But if you only want the background on some posts, instead of placing the background on the entire gallery, you could put the "blog-gallery" rule back to only setting the margins, and then add this to the end of the CSS file (must be at the end to be able to override the default white background):

.withimage {
  background: url(http://momblogsociety.com/wp-content/uploads/2017/07/pretty-flowers.jpg);
  background-size: cover;
}

Then, on those sections that you want a background, add the class "withimage" with "blog-posts".

Alita Edmonds
Alita Edmonds
6,068 Points
Alita Edmonds
Alita Edmonds
6,068 Points

I guess I am trying to say that how could I make the length of an image longer. That is what I am wondering.

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

You said you wanted it on certain posts, so it should cover each post you apply it to. Or are you saying you want to make the background a different size from the item itself? If so, you might enclose the item in another element, put the background on the enclosing element instead, and then set the size to what you want.