How to correctly use SHORTHAND with the BACKGROUND property?

Question

How to correctly use SHORTHAND with the BACKGROUND property?

Navigation

#1 by (5 votes)

2

I tried to optimize my CSS code by using shorthand , specifically with the property background , the problem is when I want to incorporate the property background-size in the shorthand . Please, I would appreciate your help, since I was searching and I could not find the solution, I do not know if it has much to do with the order in which the values within the shorthand go.

This is the HTML

<p><a href="mailto:[email protected]">JEAN LEON: Director Comercial.</a></p>
<p><a href="mailto:[email protected]">SHEYLA RIOS: Jefa de Ventas.</a></p>

Here the extended code without using shorthand (validated by W3C):

a[href^="mailto"] {
background: url("../imagenes/mail.png") left center no-repeat;
background-size: 1.5em;
padding-left: 40px;}

link

Using Shorthand returns Error.

a[href^="mailto"] {
background: url("../imagenes/mail.png") 1.5em left center no-repeat;
padding-left: 40px;}

css3 css

asked by Jean Devonne 15.01.2018 в 18:58

source

1 answer

In java, use a different class depending on the operating system How to enter - between characters of a string in JavaScript?

score 5 · Accepted Answer

Currently the background property accepts the following values:

Syntax:

background: [ background-color || background-image || background-repeat || background-attachment || background-position ] | inherit;

From CSS3 , it has been proposed to add the background-size, background-origin y background-clip properties. Here you can find the draft

The background-size property is not yet a valid value that must be set using the background shortcut. That is, it can be established, it will work ( in new browsers ) but it is not yet standard, so it is not valid.

References:

MDN - CSS > Background > Specifications