Digital Web Magazine

The web professional's online magazine of choice.

Web Design 101: Backgrounds : Comments

By Paul O'Brien

May 21, 2007

Comments

David Hellsing

May 22, 2007 2:43 AM

Nice and very thoughtful article. I especially like how you described explorers behaviour for each property. Thanks!

Matt Squirrell

May 22, 2007 6:10 AM

A nice article, but the email sent to subscribers read ‘newbies and experienced developers should be sure to bookmark this exhaustive resource’.
There simply isn’t anything in that article that someone with a fair understanding of CSS wouldn’t know.
This is not a critisism of yourself or the article (as it did exactly what the title suggested it did), but an objection to the way the email was worded.

Matthew Pennell

May 22, 2007 6:26 AM

@Matt: Sorry if our email gave the impression that there was something revolutionary in the article; you’re correct that a CSS expert should know about all the features Paul covered, but it’s always nice to get a refresher on the basics. :)

Happy Gilmore

May 22, 2007 7:02 AM

Excellent article, very in dept and well illustrated. Kick ass!

Mark Wyner

May 22, 2007 9:25 AM

I’d like to share an important note about background images in HTML emails. Windows Live Mail strips all instances of “background.” Thus with shorthand, background colors are also removed. This can cause significant readability issues. The solution is repeating “background-color” as longhand directly after a “background” call as shorthand.

You can read more about this in an article I posted at Campagin Monitor:

http://www.campaignmonitor.com/blog/archives/2007/01/how_windows_live_mail_and_yaho.html

Mike Barlund

May 22, 2007 10:02 AM

Another nice and thorough explanation of a specific CSS topic. There is always something to learn or be reminded of and this article did both for me. Great job!

Bjarni Wark : Bj2design

May 22, 2007 3:56 PM

Thanks you for your insights into Backgrounds, good to read it all in one place.
I also like the fact that you can apply background images to as well. Quiet handy and adds more versatility to creating sites in CSS.

Paul O'B

May 23, 2007 7:23 AM

Thanks for the comments and glad you liked the article. It wasn’t meant as an advanced tutorial but just a thorough explanation of the details. However I don’t think the IE7 behaviours in overflow containers have been documented before.

Ben Curtis

May 23, 2007 11:28 AM

Useful article, and I hate to quibble, but I don’t think this is correct:

“On borders greater than 1px width, all versions of IE will allow the background to extend mid-way through the border.”

Your sample screenshots don’t show that at all. They show a background that goes to the inside edge of the border, instead of the outside edge like the other browsers. If the bg was halfway into the border, then you should see some of it poking through the gaps in the border, but you don’t. Also, you would see you “test” content not reaching all the way to the background edge, since it doesn’t overlap the border.

I think you fell prey to an optical illusion caused by the corner border dashes looking like they were cut out.

Paul O'B

May 24, 2007 1:25 AM

Hi Ben,

Well spotted :) – That’ll teach me to believe what my eyes are telling me. You are of course correct and the background only goes to the inside edge of the border and not the middle. The image was just an optical illusion with the mitred corner effect and I should have spotted that.

I’ll see if I can get corrected in the article. Thanks for pointing it out.

Matthew Pennell

May 24, 2007 6:28 AM

Ben’s correction is now reflected in the article – thanks, Ben!

old9

May 27, 2007 11:37 PM

the background in IE would cover the border area with out hasLayout.

Paul O'B

May 28, 2007 2:36 AM

old9 – Yes that’s correct also but I wouldn’t rely on applying it to a container for anything other than holding simple content. We all know what happens when the element doesn’t have “haslayout” and it’s likely that the content would be unreliable and victim to all sorts of bugs.:)

However what you say is true and on elements that don’t have layout the background will extend under the borders. As I said in the article this is seldom an issue unless you are using dotted or dashed borders anyway.

Nora Brown

June 11, 2007 9:14 PM

Thanks for the thorough review of background options. I came across a bug a bit ago with mixing keywords and units – definitely avoid as mentioned in the article. Netscape and some versions of Opera and Safari will fail to show the background image altogether. See Andy Budd’s post on the subject.

Usamah M. Ali

June 30, 2007 7:32 AM

Great tutorial. I just want to draw your attention that the image in the following URL example isn’t showing up, so you may want to fix ir:
http://www.digital-web.com/extras/backgrounds_101/dweb-ex1.htm

Paul’s writing style gets you everything right in simple words. Thanks.

Sorry, comments are closed.

Media Temple

via Ad Packs