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

guram dgebuadze
seal-mask
.a{fill-rule:evenodd;}techdegree
guram dgebuadze
Front End Web Development Techdegree Student 4,122 Points
Posted by guram dgebuadze
.a{fill-rule:evenodd;}techdegree
guram dgebuadze
Front End Web Development Techdegree Student 4,122 Points

background-size: cover;

image doesnt cover whole area of header while writig cover value. can someone explain what can i do? (this problem appeared when i was trying to do another project myself.) it is stretching far more in height despite the size of picture

Cooper Runstein
Cooper Runstein
11,850 Points
Cooper Runstein
Cooper Runstein
11,850 Points

It'd be much easier to help you if you shared some of the relevant code, there are a lot of things that could be wrong, too many to guess all of them. Even if you just share the CSS and HTML for your header, image, and the parent container of the header, it would help a lot.

3 Answers

guram dgebuadze
seal-mask
.a{fill-rule:evenodd;}techdegree
guram dgebuadze
Front End Web Development Techdegree Student 4,122 Points
guram dgebuadze
.a{fill-rule:evenodd;}techdegree
guram dgebuadze
Front End Web Development Techdegree Student 4,122 Points
  • { box-sizing: border-box; } html, body, p, h1, h2, ul, ol, li, a, img { padding: 0; margin: 0; }

body { color: rgba(177,244,111,.7); font: 1em/1.5 Helvetica, sans-serif, sans; }

h1 { font-size: 3em; /48px/ color: rgba(255,255,255,0.8); margin: 0.2em 0 1.5em 0; line-height: 1.1; }

ul li { margin-top: 1.5em; /24px/ display: inline-block; text-decoration: none; border-right: 1px solid #000; padding-right: 1em; }

ul li:last-child { border: none; }

a { text-decoration: none; }

/------- class selectors------------/ .main-header { padding-top: 50px; height: 700px; width: 100%; color: rgb(155, 150, 145); font: italic bold 1.3em/1.2 Times, vardana, Arial, courier; text-align: center; margin: 0; background: rgb(239, 144, 22,.8) url("../img/kutaisi.jpg") no-repeat center/cover; }

.title { color: rgba(255,255,255,0.8); margin-bottom: 2em; } this is css

izzy goldman
izzy goldman
12,542 Points
izzy goldman
izzy goldman
12,542 Points

Hard to know without seeing the html markup.

a few options:

  1. Is that actual image size 700px height?

2.what happens when you remove background-position:center;

guram dgebuadze
seal-mask
.a{fill-rule:evenodd;}techdegree
guram dgebuadze
Front End Web Development Techdegree Student 4,122 Points
guram dgebuadze
.a{fill-rule:evenodd;}techdegree
guram dgebuadze
Front End Web Development Techdegree Student 4,122 Points

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ქუთაისი</title> <link rel="stylesheet" href="assets/css/main.css"> </head> <body> <header class="main-header">

<nav class="main-nav">
    <ul>
        <li><a href="">მთავარი  </a></li>
        <li><a href="">ბაგრატის ტაძარი</a></li>
    </ul>
</nav>

<p class="title"> ქუთაისი ქალაქია, ინდუსტრიის მშენებელი</p>
<h1> ქუთაისი-მამაქალაქი </h1>

</header>

<div class="main-content"> <div> <p> ქალაქი და მუნიციპალიტეტი საქართველოში, იმერეთის მხარის ადმინისტრაციული ცენტრი. საქართველოს </p> </div> </div> <!-- end of main content -->

</body> </html>