Css difference between background: and background-image:

Bug Reports
1

I notice it is common when setting a background image that many choose to inline the style as such:

style="background-image: url(mybgimage.png);"

(I suppose its quick and dirty to save from adding a class or id)

In Bootstrap Studio though if a background image for inline style is added its does like so:

style="background: url(mybgimage.png);"

This requires one to set additional settings like cover etc…is this correct as it adds more work ?

3

The difference between Background and Background-image is with background you can write the styling without the class names in one line.
Let say you want to add mybgimage to the body centered,covered ,norepeat and cyan as fallback background-color for browsers that not support background-images.
With Background

<body style="background:url('mybgimage') center / cover no-repeat,var(--cyan);">

With Background-image you must write all class names

<body style="background-image:url('mybgimage');background-position:center;background-size:cover;background-repeat:no-repeat;background-color:var(--cyan);">
4

I always wondered why there were two CSS rules for “background.” Now I know.

1 Like
5

Yes, definitely more code efficient…thanks for that.

6

You are welcome,
but as @jo-r mentioned, you extract and move your inlines to your custom.css, right?

7

Yes, that is the normal method I use.