• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 360
  • Last Modified:

background vs background-color css

This is a fairly easy question, it is just basic CSS.

If I had one of these two lines of code applied to a div in CSS, is one preferred over the other or are both commonly used?

div
{
     background-color:#000000;
}

Open in new window

or
div
{
     background:#000000;
}

Open in new window


Thanks
0
Curtis Long
Asked:
Curtis Long
  • 4
  • 3
2 Solutions
 
COBOLdinosaurCommented:
Background is more general and is used to specify multiple attributes including color.

The preferred standard in most professional shops is to use the more precise background-color.

0
 
BadotzCommented:
CSS shortcuts are, well, just that. But by being specific, you add clarity to your CSS, something future readers will appreciate ;-)
0
 
Julian MatzJoint ChairpersonCommented:
With the CSS background: property, you are able to define all of the following at once:

background-color
background-image
background-position
background-repeat
background-attachment

So, as you can see, if you need (or want) to define all of these, it's much easier to use the shorthand property. Either of the two methods are perfectly valid though. Personally, I prefer the shorthand.

Example:

body
{
    background: #000 url('../images/bg-body.jpg') 50% 50% no-repeat fixed;
}

If you try the above with their appropriate specific properties, you'll end up having to type a lot more, and will end up with a couple more bytes in your stylesheet.css :)
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
Julian MatzJoint ChairpersonCommented:
Sorry, the shorthand order is actually: color, image, repeat, attachment, position
body { background: #000 url('../images/bg-body.jpg') no-repeat fixed 50% 50%; }

Open in new window


(Though not all properties need to be used - i.e. if you like, you can leave out color, for example, or attachment, for example).
0
 
COBOLdinosaurCommented:
Sorry, the shorthand order is actually: color, image, repeat, attachment, position

Points out the problem with shortcuts.  Save ten seconds of typing time and burn a 10 minutes of testing time to fix typos or an invalid declaration.  That is why most professionals use the seperate declarations; for themselves and the developer who has to do the next set of changes. The "shortcuts" just make it easier to make mistakes.
0
 
Julian MatzJoint ChairpersonCommented:
Well, typos can be made regardless of whether shorthand properties are used or not. All you need to do is leave out one simple colon or semicolon. That's why I always have a testing environment and do my testing in short, quick intervals - because that way, it makes it easier to go back and correct mistakes. With CSS, it's not such a problem since most browsers will have tools to assist with debugging, but especially for other things, it has definitely helped in the past.
0
 
COBOLdinosaurCommented:
You miss the whole point.  If you want to fly solo you can do what you want and spend your whole career working on the same code... but in a team environment you keep things as simple and clean as possible for the developer coming behind you.

A couple of lines of CSS is no big deal, and the amount of CSS code in most shops is very small compared to other components, but if there are shortcuts in CSS does that also mean the same rules apply to scripting and configs and apps.  It is all about attitude, and cutting corners on small things justifies doing it on big stuff as well.

That is not intended as an attack on you. I'm just trying to point out the weakness in a logical position that is flawed and has brought disaster to a lot of projects I have seen where quick was more important than maintainability and sustainability.
0
 
Julian MatzJoint ChairpersonCommented:
I get your point, but I don't fully agree. I can see how shortcuts can make life harder in the long term, but I don't see this as a "shortcut" or "cutting corners". It's a CSS shorthand property that is well defined and perfectly valid, just like other standard CSS properties defined in the CSS Spec.

The trick, imo, to working as part of a team is to follow defined standards, which the background shorthand property is part of. Of course it's up to the team if they prefer not to use shorthand properties, but I really don't see any good reason not to use them.

Also, all the browsers I know don't care about the background shorthand order. Nontheless, I do agree standards and specs should be followed, whether working as a team or not, but, for obvious reasons, especially when working as a team.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now