[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

background vs background-color css

Posted on 2011-10-27
8
Medium Priority
?
356 Views
Last Modified: 2012-05-12
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
Comment
Question by:Curtis Long
  • 4
  • 3
8 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37042584
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
 
LVL 29

Expert Comment

by:Badotz
ID: 37045054
CSS shortcuts are, well, just that. But by being specific, you add clarity to your CSS, something future readers will appreciate ;-)
0
 
LVL 21

Accepted Solution

by:
Julian Matz earned 1400 total points
ID: 37048459
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 21

Expert Comment

by:Julian Matz
ID: 37048477
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
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 600 total points
ID: 37048511
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
 
LVL 21

Expert Comment

by:Julian Matz
ID: 37048683
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37048763
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
 
LVL 21

Expert Comment

by:Julian Matz
ID: 37048840
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question