Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS SHorthanding the Background Property with Compound Values

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #170609
    bmoneruiux
    Participant

    How in the world do I shorthand the background property when I have compound values for some of it’s attributes?

    My longhand is:

    background-color:#269;
    background-image: linear-gradient(white 2px, transparent 2px),
    linear-gradient(90deg, white 2px, transparent 2px),
    linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
    background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-attachment:fixed;
    background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;

    I tried:

    background:#269 linear-gradient(white 2px, transparent 2px),linear-gradient(90deg, white 2px, transparent 2px),linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px) 100px 100px,100px 100px,20px 20px,20px 20px fixed -2px -2px,-2px -2px,-1px -1px,-1px -1px;

    …but it didn’t work (and looks crazy might I add)

    #170611
    Paulie_D
    Member

    I think you have to do one full set after another with comma separation.

    Frankly though, it would be a mess to read…I would put each property on a separate line longhand as you had it originally…much easier to debug too.

    #170732
    bmoneruiux
    Participant

    Hmm I think you’re right.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.