How To Upload Background Image In Html

Groundwork Image Lawmaking

You lot can add a background image to a web page or HTML element past using the CSS groundwork-image property or the background belongings. 1 of the benefits of doing this is that you tin yet add content in front of the image (such as text and other elements). This content appears simply as it usually would fifty-fifty if the background paradigm wasn't in that location.

To use these properties, you apply them to the HTML element that you wish to add the groundwork image to. For example, you could use a background image to a <div> element, like this:

Source Code	Result
	This text appears in front of the groundwork paradigm.

"Repeating" Background Images

If the background paradigm is smaller than the HTML chemical element that it'southward applied to, it will "repeat" across the full width and elevation of the HTML element. In other words, instead of just actualization one time, the background image volition appear again and over again until information technology uses upward the full size of its parent container. Example below.

In this example, we ready the <div> element to be larger than the background image. The background paradigm is 225 pixels broad and 151 pixels loftier. Let'due south make the parent container (i.e. the <div>) 300 pixels wide and 200 pixels loftier.

Source Lawmaking	Effect
	This text appears in front end of a repeating background prototype.

Background Design

Here'south another example, this time using an epitome that's more suitable for beingness repeated.

Hither's the image on it's own (without existence repeated). This image is 137 pixels wide and 129 pixels high.

Now, allow'southward use it equally the background of an element that's 300 pixels wide past 200 pixels high.

Source Lawmaking	Result
	This text appears in front of a repeating groundwork image.

How Exercise I Cease It Repeating?

Many times, you might adopt that the paradigm doesn't repeat. Peradventure you only want it to announced once as a background image. Easy!

To stop your background prototype from repeating, you tin can use the groundwork-repeat holding along with the background-position. Alternatively, you tin can just utilize the groundwork property to set all your background properties at once.

Source Code	Consequence
	This text appears in front of a repeating groundwork image.

Embedded Images

Y'all can likewise have embedded images on your web page. These are images that are just embedded into your web page equally their ain HTML element, as opposed to being a background of some other element. Encounter HTML Paradigm Codes to embed an image into your spider web folio.