Background-image

Category: Web Development & Approved by devanshchakravarti83@gmail.com On January-18-2021 14:08:53

Background Image Property



The background-image property is used to set one or more background images on an HTML elements.

The syntax for background-image property is:
background-image: url();
Inside url() function image link or address of image file which is already in your web project file is to be inserted.
Example:
background-image: url(../images/logo.jpg);
Or background-image: url(‘https://.....link......’);

Images inserted on an HTML elements by “background-image” has the keywords none or <image> as an value.
none - this value denote the absence of images.
<image> - this value display images. You can use several functions, separated by commas, even multiple backgrounds images are supported.

Different image-related functions are:

  • cross-fade()

  • element()

  • image()

  • image-set()

  • linear-gradient()

  • radial-gradient()

  • repeating-linear-gradient()

  • repeating-radial-gradient()

  • paint()

  • url()



You can even set a fallback color, if the images doesn’t get load due to bad network than or gradient-color is not supported by browser, so the browser will look for the background color.
Example:
background-image: url(../images/logo.jpg) magnate;


Example:
HTML Code
<body>
<div>
<p>
Here be will use multiple value
</p>
</div>
</body>

CSS Code
p {
font-size: 1.5em;
color: #00cfff;
background-image: none;
background-color: transparent;
}
div {
background-image:
linear-gradient(to bottom, rgba(218, 112, 214,0.5), rgba(148, 0, 211,0.5)),
url('https://mdn.mozillademos.org/files/7693/catfront.png');
}

We have made blog on CSS tutorial from basic, if you haven’t read them so Click Here

Note: content are taken from various documentation files



Comments

Share your thoughts about this post
web counter