CSS: background: vs background-image:


#1

Hey is there any reason you'd use one over the other in css?

background: url(); vs background-image: url();

Is background: url(); just the shorthand version? Like how you could do padding-right: 8px; or you could do padding: 5px 8px;?


#2

Hey @ghughes13,

Premising that those are two distinct properties, in your specific example there's no difference in the result, since background actually is a shortcut for

background-color
background-image
background-position
background-repeat
background-attachment
background-clip
background-origin
background-size

Thus, besides the background-color, using the background shortcut you could also add one or more values without repeating any other background-* property more than once.

Which one to choose is essentially up to you, but it could also depend on specific conditions of your style declarations (e.g if you need to override just the background-color when inheriting other related background-* properties from a parent element, or if you need to remove all the values except the background-color).

Hope that this explains it clearly for you :slight_smile:


#3

gracias por la ayuda @0xb4dc0ded :slight_smile:


#4