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. User Avatar
    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.

    • User Avatar
      Chris Coyier
      Permalink to comment#

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

    • User Avatar
      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. User Avatar
    Amrit
    Permalink to comment#

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

    • User Avatar
      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. User Avatar
    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???

    • User Avatar
      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. User Avatar
    Kustom Designer
    Permalink to comment#

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

  5. User Avatar
    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. User Avatar
    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”.

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag