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 CSS Basics (2014) Basic Layout Backgrounds: Size and Position

Posted by vikas pal
vikas pal
11,563 Points

The Image is still being cut-off while using background-size property

I was wanted to display the whole size of the image in the container but after using cover too, it doesn't scale proportionally. Plz, help me to get out of this issue.

.top{
  font-weight: normal;
  font-family: helvetica;
  text-align: center;

  width: 100%;
  color: White;
  padding-top: 40px;

  height: 720px;
}

header{
  background-image: url("img/12.jpg");

  background-size: 100%;
}

<body>
    <header class="top">
      <span class="spany">Get Ready! To experience the wonders of VR's</span>
      <h1>Virtual Reality, by Google</h1>

    </header>

4 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Thanks, vikas pal!

Try changing your .top CSS rule to:

.top {
  font-weight: normal;
  font-family: helvetica;
  text-align: center;
  background: url("img/12.jpg") no-repeat;
  background-size: 100%;
  color: white;
  padding-top: 40px;
  height: 880px;
  width: 100%;
}

The width needs to be flexible -- for example width: 100%. You can adjust the height with media queries or viewport units. For instance:

.top {
  ...
  height: 60vw;
  width: 100%;
}

Hope this helps. :)

vikas pal
vikas pal
11,563 Points

Yeah, it makes sense! Thanks for the help.

vikas pal
vikas pal
11,563 Points
vikas pal
vikas pal
11,563 Points

Guil Hernandez

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi vikas pal,

It's tough to tell without looking at the image. Could you please send a Workspace snapshot so I can have a look? :) Thanks!

vikas pal
vikas pal
11,563 Points

Okay, here it is '''https://w.trhou.se/dp6erja10q'''. "Note: The files in the untitled folder of this folk is not used. It was only for my reference. the real code is in the main directory"

nicolebell
nicolebell
1,214 Points
nicolebell
nicolebell
1,214 Points

footer { height: 450px; box-sizing:border-box; text-align: left; background: lightblue url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/3029212/screaming.jpg") no-repeat center; background-size: cover; border: grey solid 10px; width: 100%; max-width: 1000px; }

Having the same issue. I tried to make the image itself smaller and then it was just grainy.