The header for the Alamanc has come in, this time from Giovanni Difeterici.

We use a lot of techniques that we have already established to get started with this. We create a new .scss file just for the Alamanc section of the site. We resize the original artwork to the size we need it.

We play around with the CSS3 background-size properties cover and contain. It's really a matter of what is getting cropped and how. 100% is always an option too.

Comments

  1. Kustom Designer
    Permalink to comment#

    “Alamanc has came in” should be: almanac has come in.
    “Wreate a new .scss file just for the Alamanc” should be: We create a new .scss file just for the almanac.

    Not trying to be a spelling or grammar nazi but I just figured you’d want to keep the the subscription part of the site top notch.

    • Chris Coyier
      Permalink to comment#

      Fixed! Thanks for taking the time to let me know.

    • Kav
      Permalink to comment#

      It should really be in past tense, because your talking about something you’ve already done:

      “We used a lot of techniques that we have already established to get started with this. We created a new .scss file just for the Alamanc section of the site. We resized the original artwork to the size we need it.

      We played around with the CSS3 background-size properties cover and contain. It’s really a matter of what is getting cropped and how. 100% is always an option too.”

  2. Amrit
    Permalink to comment#

    “keep the the subscription” – Happens to all of us ;)

    • Kustom Designer
      Permalink to comment#

      lol, i know i saw it right after i posted it. I know chris cares about stuff like that so thats why I let him know….

  3. vanmen
    Permalink to comment#

    may be its me being stupid but I am watching you resize the browser window like a million times and i see the content resize with it….when I try that in my browser of choise (Chrome or Safari) on a windows 7 box, its not showing me the content until I let go of the window. I just see a line representing the browser left side.. if you know what i mean!? Is that a setting somewhere or does this only work on a iMac???

    • Chris Coyier
      Permalink to comment#

      That’s pretty weird. I know Opera on Mac in some older versions didn’t redraw the window until you let go of the mouse button when resizing the window, but that’s not true anymore. Not sure about Windows. I know I personally wouldn’t like that, but in the end, it’s not that big of a deal. Most of our users don’t do a whole lot of browser resizin’ – it’s mostly us designer types =)

  4. Kustom Designer
    Permalink to comment#

    @vanmen must be your setup because I have win7 and it resizes fine in chrome for me

  5. vanmen
    Permalink to comment#

    Okay thanks…i know its not a big deal and i will not dwell about it but i was just wondering about that….like you said Chris pretty weird!

    Still i would like to know whats causing this at my end. Let me dive into it and i’ll let y’all know.

    Btw fantastic screencasts Chris! I just can’t hold my laugh from time to time hearing you discuss with youself;-) I watch these creencasts in bed late on a iPad3 with my headphones on next to my wife. She just can’t understand what I am laughing about? You are watching a training right? Is what she said…. Yep. I said. So why are you laughing? Because he so funny! Classic…..

  6. Martin Wolf
    Permalink to comment#

    Just a quick tip for the Chrome web inspector: You can right click on the url of a background image and say “Open Link in New Tab”.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.