background-size short hand property and background color and image?

[ravinder07]

Hi, i was practicing css3 by making a image slider.
Here is link of slider i am trying to understand: http://creativejuiz.fr/trytotry/juizy-slideshow-full-css3-html5/#sl_i1

if you download the file you will get html and css file in it.

In the css file. The developer use background-size property this background-size: 13px, 26px, auto, 13px, 29px, 37px, 53px;
he use 7 values. Could you please name them and he usebackground-color:#e4dfd2; then below background-imageproperty to give the color gradient effect….he did not use background image here but use background-imageproperty to give background-color gradient effect….i want to know is it syntactically correct using background image property to give background color gradient effect…however Firefox showing gradient effect but Google chrome is not showing.

Here is codepen http://codepen.io/anon/pen/uImby
Codepen also not showing gradient effect.

[Paulie_D]

We appreciate that you are just starting out but this is not a teaching site.

We’re not here to explain how code works or provide basic information on code syntax etc.

The forum can assist you with problems you are having with specific code or effects not working on pages/sites you are working on.

I would suggest that you make a search for proper training sites like Treehouse etc.

if you download the file you will get html and css file in it.

Asking people to download files is not likely to get you much uptake. We’re all pretty wary about downloading files from unknown sources.

[MDMueller]

I assume the site is the same as the downloaded file (didn’t download it).

What confuses you, is probably the feature “multiple backgrounds”. When multiple backgrounds (in this case gradients) are specified, multiple background positions and background sizes may be specified. In your case 2 radial gradients and 5 linear gradients are specified (and 7 different background sizes for them).

A great example of how to specify multiple backgrounds: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds

Correct Syntax Radial: https://developer.mozilla.org/en/docs/Web/CSS/radial-gradient
Linear: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

[Paulie_D]

Unfortunately, there seems to be a great deal of “running before learning to walk” here.

[ravinder07]

ok i will take care next time.

[Author]

Posts