HTML Style Background Image Property

Background Image Example

Here, we apply a background image to a <div> element.

Run

Stack editor Unstack editor

<div style="background-image:url('/pix/samples/bg1.gif');padding:5px;width:150px;height:200px;border:1px solid black;">

<p>See the background image?</p>

</div>

No-Repeat

Here, we set the background image to background-repeat:no-repeat. This prevents the image repeating across the element (in the event that the image is smaller than the element). You can also use repeat-x and repeat-y to make the background repeat only horizontally or vertically. For more info, see the CSS background-repeat property.

Run

Stack editor Unstack editor

Editor Preview

<div style="background-image:url('/pix/samples/bg1.gif');padding:5px;width:150px;height:200px;border:1px solid black;background-repeat:no-repeat;">

<p>The background image doesn't repeat.</p>

</div>