0

I have the following HTML code:

 <header id="header">
      <h1><span id="titlu-pagina">Watercolors</span></h1>

          <ul>
              <li><a href="#">About Me</a></li>
              <li><a href="#">Where To Find Me</a></li>
              <li><a href="#">The Blog</a></li>
         </ul>
</header>

and the respective CSS one:

  #header {
          height: 800px;
          text-align: center;
          border-bottom: 1px solid black;
          background-color: #734C8F;
          background-image: url('10.jpg');
         -webkit-background-size: cover;
         -moz-background-size: cover;
         -o-background-size: cover;
          background-size: cover !important;
    }

I am trying to set up an image as a background for the header but for some reason the image is not displayed in its full size. I've tried low res images and still, some parts are cut from it. If I resize the browser the image scales and in the end it gets to its full size.

If I change the code to

 background-image: url('10.jpg') no-repeat center center fixed;

the image doesn't display at all. What am I doing wrong? I've tried the code in all browser but the result is the same.

Kasia
  • 118
  • 3
  • 16
  • _“If I change the code to `background-image: url('10.jpg') no-repeat center center fixed` the image doesn't display at all”_ – of course it doesn’t, because that is not a valid value for the `background-image` property – that’s for the _short-hand_ version, `background` … – CBroe Apr 10 '16 at 09:32
  • Oh, thank you. Now I understand. It indeed fixed this specific issues, but the scaling thing is still happening. – Kasia Apr 10 '16 at 09:43
  • I can’t really make sense of your problem description; can you show a live example please? – CBroe Apr 10 '16 at 10:04
  • https://jsfiddle.net/Cilvako/1hwncnmL/ If you try to resize the browser window, the image will scale but is not keeping the original size and it gets cropped. Maybe I am explaining the issue very well, but I want my background image to look the same no matter what device I am using. – Kasia Apr 10 '16 at 11:44
  • Looks like this is simply a misunderstanding on your end, of what `background-size: cover` actually does. https://developer.mozilla.org/en-US/docs/Web/CSS/background-size: _“[cover] scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, _the image is clipped_ either left/right or top/bottom.”_ – CBroe Apr 10 '16 at 11:50
  • If you _want_ the image to get “squished” instead of clipped – then use `background-size: 100% 100%` – CBroe Apr 10 '16 at 11:53
  • Oh, wow, it fixed the issue. This is what happens when you're not using MDN as a learning resource :). Can I ask you when is generally recommended to use the 100% 100% background-size and when it would be better to use :cover? It's not very clear to me how are they doing two different things in terms of covering the container. Thank you! – Kasia Apr 10 '16 at 12:03
  • I added an answer, plus a little more explanation. – CBroe Apr 10 '16 at 12:16

4 Answers4

1

Looks like this is/was simply a misunderstanding on your end, of what background-size: cover actually does.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size:

[cover] scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

(“When the image and container have different dimensions” should rather be “have different aspect ratios” – because if they had not different dimensions, but width and height of image and element would be exactly the same, then we would not need to apply background-size in the first place.)

If you want the image to get “squished” instead of clipped – then use background-size: 100% 100%.

Can I ask you when is generally recommended to use the 100% 100% background-size and when it would be better to use :cover? It's not very clear to me how are they doing two different things in terms of covering the container.

background-size: 100% 100% means, stretch the image in both dimensions to 100% of the respective container dimension. If the aspect ratio of the image and the element don’t match, the image will be distorted/squished.

cover however is intended to scale the image to be as large as possible, while keeping it’s aspect ratio.

Think of it like watching a movie on your TV screen. Cinema aspect ratio and TV aspect ratio usually differ (or at least used to, with older TVs.) Now usually you’d want to see all of what is going on in the picture, and not miss anything that happens “on the sides” of the it. Therefor the movie is scaled in a way that it covers the whole width (or height) of the screen, and you get black bars on the top and the bottom (or left/right) – thereby the aspect ratio of the movie is kept – because you would not want to watch a movie distorted, that just looks weird when car tires are ovals and the people have unnaturally wide or long faces.

That analogy make things clearer …?

CBroe
  • 91,630
  • 14
  • 92
  • 150
  • Yes. So if I wanna make sure I won't end up with distorted images, I better use :cover. If I'm sure about the aspect ratio, I better use :100% 100% and I don't get clipped images. So I guess it's a matter of what suits me better in a particular situation - although I would go for the :100% 100%. Thank you very much for taking the time to explain :)! – Kasia Apr 10 '16 at 13:13
0

To make your background-image resize without cropping it must be proportionate to the parent, or header. If your header has a 16:9 ratio then so must your image. They need to resize together. But this seems more tricky than it needs to be.

The alternative would be to use the following structure;

<header>
    <img />
    <nav></nav>
</header>

The image sits inside the header. The nav (which sits on top of the image) is absolutely positioned relative to the header.

This may need some further media-queries to manage font-sizes and nav list items for smaller screens.

JS Fiddle

Jabuka
  • 131
  • 14
0
#header {
      
      text-align: center;
      border-bottom: 1px solid black;
      background-color: #734C8F;
      background-image: url('10.jpg');
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
      background-size: cover !important;
      width:100%  
      min-height: 100vh;

}

I have add 2 lines of code to your header section by this you can able to solve your problem

David Buck
  • 3,752
  • 35
  • 31
  • 35
user2542263
  • 1
  • 2
-1

Bro instead of using background-image: url ('x') no-repeat center center fixed; in you above alternate i suggest you this is the format.. background:url ('x') no-repeat center center fixed; because the background short hand property in css is what i suggest in my message.. thk you bye frnds

hemanathan
  • 1