Invalid Property Value on Background-Image

Invalid Property Value on background-image

Yep because the background-image property is for the image part only, not the position or repeat properties of the background, use background:

.up { 
    background: url('/design-library/profound_test/images/cab_images/white-arrow-up.png') 50% 50% no-repeat; 
}

Chrome reports 'Invalid Property Value' for image

First thing, it's recommended that you avoid spacing when assigning a class to an HTML object, i.e:

<div class = "upper-img"></div>

should be:

<div class="upper-img"></div>

For the background, you have to use the relative path of the image. If the image is inside the same folder of your in-line css, you can just call the image. If it's in a different folder you need to navigate using:

../ to go back one folder level.
/ to go further one folder level.

I.E:

background: url(../img/alaskanMountains.jpg);

Invalid property value on background image and image is not showing

you can do this it should work fine :

background: url("Dr.jpg") no-repeat left top, linear-gradient(#eb01a5, #d13531)

Why does the browser try to use an otherwise invalid property declaration when I introduce a CSS variable?

This how CSS variables are meant to work. When using CSS variables the browser can only evalute the value at run-time so the value will be considered as valid (or lets say in a standby mode) until we evalute the variable and if the browser find the whole value invalid, it will fallback to initial or inherit:

A declaration can be invalid at computed-value time if it contains a var() that references a custom property with its initial value, as explained above, or if it uses a valid custom property, but the property value, after substituting its var() functions, is invalid. When this happens, the computed value of the property is either the property’s inherited value or its initial value depending on whether the property is inherited or not, respectively, as if the property’s value had been specified as the unset keyword. ^ref

A more explicit example with a clearly non valid value:

html {
  background:linear-gradient(red,blue); /* this will be used */
  background:strange-gradient(red,blue); /* this is a joke */
  
  min-height:100%;
}

background Invalid property value in Chrome

You may want to read first this article: Optimizing SVGs in data URIs. The essence is:
whenever you’re using an SVG as a data URI:

Swap its attribute values’ double quotes with single quotes.
Encode <, >, #, any remaining " (like in textual content), non-ASCII characters, and other URL-unsafe characters, like %.
Wrap the URI with double quotes when using it: , url("").

I hope it helps.

.t32{background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 20 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23be1196' stroke-width='4' d='M4 10 l5 11 l8 -20'/%3E%3C/svg%3E");

  background-repeat: no-repeat, no-repeat; 

  background-position: 0 0;  

  background-size: 32px 20px; 

  margin-top: 20px; 

  padding-left: 35px; 

  color: #4a4a4a; 

  font-size: 20px;}

<div class="t3 sMargin" style="margin-top: 20px; background-color: #dedede; padding-left: 40px; padding-right: 40px; padding-top: 20px; padding-bottom: 20px;">

    <div class="t31" style="color: #5222a8; font-weight: bold; font-size: 20px;">

        Lorem ipsum

    </div>

    <div class="t32">

        Lorem ipsum

    </div>

    <div class="t32">

        Lorem ipsum

    </div>

    <div class="t32">

        Lorem ipsum

    </div>

</div>

background invalid property

Remove the space and it works

 background: url(img/fondo-ingresar.jpg);

background property is the resume of multiple properties, and you can define values space separated:

 background: #fff center center no-repeat url(url.jpg);

If you put an space between url and () it doesn't recognize it.

CSS Invalid Property Value?

change

background-color:

background:

Because background is a shorthand property for

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

SVG Background: Invalid property value, but no encoding problem, no size problem, correct SVG data

I think there are problems with your string. Use this URL-Encoder to compare your differences.

EDIT: I found this question with the same issue. (may be this is a
duplicated)

Quick example:

section {
position: relative;
width: 100%;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0,0,0,.1);
}

section:before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1759' height='487'%3E%3Cpath fill-rule='evenodd' d='M.275 486.998v-71.289l195.433-17.134 272.605 36.139 354.025-40.084 376.837 22.027 167.116-33.691 123.525 10.183v-90.097c-19.37-7.076-33.993-19.779-41.836-37.348-12.608.575-23.677-2.665-34.94-4.042-11.307-1.384-9.418-2.978-20.29-11.748-6.322-7.559-25.001-23.314-19.396-53.32-54.99-8.674-7.704-61.466-19.727-38.411 6.692-12.833 16.4-22.991 29.181-30.047-17.93-26.729.239-59.614 26.875-62.722 4.146-.484 8.045-.83 10.293-7.007 7.362-20.224 21.257-35.519 40.076-46.175C1478.063 2.033 1497.6-1.056 1517.926.559c11.874.944 23.17 4.624 33.822 9.938 10.682 5.329 19.499 13.147 27.424 21.958 10.107 11.238 16.863 24.342 19.687 39.136 1.733 9.071 2.123 18.399 3.179 28.198 2.566 0 5.628-.463 8.504.076 17.91 3.357 33.729 10.548 46.525 24.14 20.512 21.785 26.021 47.316 17.87 75.256-8.23 28.216-28.42 45.136-56.394 53.167-1.31.376-2.851 1.283-3.508 2.4-8.365 14.199-20.443 21.727-37.183 21.019-3.065-.13-4.823.98-6.917 3.515-7.53 9.11-16.14 17.19-27.673 21.065-8.299 2.789-16.779 5.039-25.166 7.524v87.653l240.027 20.105v71.289H.275z'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
   
}

<section>
This is an example section </section>