Stretch Background Image

HTMLCodes.ws Stretch Background Image

This page contains stretch background image. Feel free to copy and paste the stretch background image into your own website, blog, or other HTML document. And feel free to modify the code as you wish.

Stretched Background on 'div' Tag

The following example demonstrates how to stretch a background image within a div element. Strictly speaking, we use the HTML img tag for this background image. We do this because at the time of writing, CSS (version 2) didn't provide any means of stretching a background image. Once CSS 3 is released and supported by browsers, we will be able to do stretch background images using the background-size property.

Original Size

First, here's the background image at its normal size. (I've placed a black border around it to make it easier to see the actual size of the image).

Stretched Size

And here it is being stretched behind some text:

Text over the top of a stretched background image!

Text over the top of a stretched background image!

Text over the top of a stretched background image!

Text over the top of a stretched background image!

Text over the top of a stretched background image!

And here is the code:

Text over the top of a stretched background image!

Text over the top of a stretched background image!

Text over the top of a stretched background image!

Text over the top of a stretched background image!

Text over the top of a stretched background image!

Stretch background image

A word of caution. This example uses absolute positioning. Be careful when positioning elements using CSS as you can get some pretty weird results. This will depend on the other content on your page, and where your stretched background is located in relation to it. Make sure you test your stretched background image in as many browsers as possible, and also use the browser's Zoom/Text Size tool to see how that affects your content.

Stretch Background Image across Whole Page

You might prefer to stretch your background image across the whole web page. To do this, you basically use the same principle as above - you stretch the image using the HTML img tag, then layer the content over the top.

Stretching the background of the whole page also requires some further considerations - such as removing the margins/padding from the whole page (assuming you want the image to stretch right to the edge of the page).

Below is an example of using the same image to stretch across the whole page.

VIEW EXAMPLE (opens in new browser window)

And here is the code:

Stretched Background

Stretched Background Example

The background image here has been acheived using an HTML/CSS hack. The page is layered. The image uses the HTML img tag - not the CSS background-image property.

This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.

Go ahead - resize your browser!

Back to the stretch background tutorial.

© Copyright 2013 - 2024 HTMLCodes.ws | Privacy Policy

• TAGS
  • <a>
    • <a>
    • <a download>
    • <a hreflang>
    • <a rel="alternate">
    • <a rel="author">
    • <a rel="bookmark">
    • <a rel="help">
    • <a rel="license">
    • <a rel="next">
    • <a rel="nofollow">
    • <a rel="noreferrer">
    • <a rel="prefetch">
    • <a rel="prev">
    • <a rel="search">
    • <a rel="tag">
    • <a target="_blank">
    • <a target="_parent">
    • <a target="_self">
    • <a target="_top">
    • <a target=(name)>
    • <a type>
  • <abbr>
    • <abbr>
    • <abbr title>
  • <address>
  • <area>
    • <area>
    • <area download>
    • <area hreflang>
    • <area rel="alternate">
    • <area rel="author">
    • <area rel="bookmark">
    • <area rel="help">
    • <area rel="license">
    • <area rel="next">
    • <area rel="nofollow">
    • <area rel="noreferrer">
    • <area rel="prefetch">
    • <area rel="prev">
    • <area rel="search">
    • <area rel="tag">
    • <area target="_blank">
    • <area target="_parent">
    • <area target="_self">
    • <area target="_top">
    • <area target=(name)>
    • <area type>
  • <article>
  • <aside>
  • <audio>
  • <b>
  • <base>
    • <base>
    • <base target>
  • <bdi>
  • <bdo>
  • <blockquote>
    • <blockquote>
    • <blockquote cite>
  • <body>
  • <br>
  • <button>
    • <button>
    • <button autofocus>
    • <button disabled>
    • <button form>
    • <button formaction>
    • <button formenctype>
    • <button formmethod>
    • <button formnovalidate>
    • <button formtarget>
    • <button menu>
    • <button name>
    • <button type>
    • <button value>
    • <button onclick>
  • <canvas>
    • <canvas>
    • <canvas line>
    • <canvas circle>
    • <canvas rectangle>
    • <canvas text>
    • <canvas image>
    • <canvas gradient>
    • <canvas fillRect()>
    • <canvas strokeRect()>
    • <canvas clearRect()>
    • <canvas rect()>
  • <caption>
  • <cite>
  • <code>
    • <code>
    • <code language>
  • <col>
  • <colgroup>
    • <colgroup>
    • <colgroup span>
  • <data>
  • <datalist>
    • <datalist>
    • <datalist select>
  • <dd>
  • <del>
    • <del>
    • <del cite>
    • <del datetime>
  • <details>
    • <details>
    • <details open>
    • <details summary>
  • <dfn>
    • <dfn>
    • <dfn abbr>
  • <dialog>
    • <dialog>
    • <dialog open>
    • <dialog modal>
  • <div>
  • <dl>
  • <dt>
    • <dt>
    • <dt dfn>
  • <em>
  • <embed>
  • <fieldset>
    • <fieldset>
    • <fieldset legend>
  • <figcaption>
    • <figcaption>
    • <figcaption cite>
  • <figure>
  • <footer>
  • <form>
  • <h1>
  • <h2>
  • <h3>
  • <h4>
  • <h5>
  • <h6>
  • <head>
  • <header>
  • <hgroup>
  • <hr>
  • <html>
    • <html>
    • <html lang>
  • <i>
  • <iframe>
    • <iframe>
    • <iframe srcdoc>
    • <iframe seamless>
  • <img>
  • <input>
    • <input>
    • <input accept>
    • <input alt>
    • <input autocomplete>
    • <input autofocus>
    • <input checked>
    • <input dirname>
    • <input disabled>
    • <input form>
    • <input formaction>
    • <input formenctype>
    • <input formmethod>
    • <input formnovalidate>
    • <input formtarget>
    • <input height>
    • <input inputmode>
    • <input list>
    • <input max>
    • <input maxlength>
    • <input min>
    • <input minlength>
    • <input multiple>
    • <input name>
    • <input pattern>
    • <input placeholder>
    • <input readonly>
    • <input required>
    • <input size>
    • <input src>
    • <input step>
    • <input type>
    • <input type="hidden">
    • <input type="text">
    • <input type="search">
    • <input type="tel">
    • <input type="url">
    • <input type="email">
    • <input type="password">
    • <input type="datetime">
    • <input type="date">
    • <input type="month">
    • <input type="week">
    • <input type="time">
    • <input type="datetime-local">
    • <input type="number">
    • <input type="range">
    • <input type="color">
    • <input type="checkbox">
    • <input type="radio">
    • <input type="file">
    • <input type="submit">
    • <input type="image">
    • <input type="reset">
    • <input type="button">
    • <input value>
    • <input width>
  • <ins>
    • <ins>
    • <ins cite>
    • <ins datetime>
  • <kbd>
  • <label>
    • <label>
    • <label for>
  • <legend>
  • <li>
  • <link>
  • <main>
  • <map>
  • <mark>
  • <menu>
  • <menuitem>
  • <meta>
  • <meter>
  • <nav>
  • <noscript>
  • <object>
  • <ol>
    • <ol>
    • <ol reversed>
    • <ol start>
    • <ol type>
  • <optgroup>
    • <optgroup>
    • <optgroup disabled>
  • <option>
    • <option>
    • <option disabled>
    • <option selected>
  • <output>
  • <p>
  • <param>
  • <pre>
  • <picture>
  • <progress>
    • <progress>
    • <progress working example>
  • <q>
    • <q>
    • <q cite>
  • <rb>
  • <rp>
  • <rt>
  • <rtc>
  • <ruby>
  • <s>
  • <samp>
  • <script>
  • <section>
  • <select>
    • <select>
    • <select autofocus>
    • <select disabled>
    • <select form>
    • <select multiple>
    • <select required>
    • <select size>
  • <small>
  • <source>
  • <span>
  • <strong>
  • <style>
  • <sub>
  • <summary>
  • <sup>
  • <table>
  • <tbody>
  • <td>
  • <template>
  • <textarea>
  • <tfoot>
  • <th>
  • <thead>
  • <time>
    • <time>
    • <time datetime>
  • <title>
  • <tr>
  • <track>
  • <u>
  • <ul>
  • <var>
  • <video>
  • <wbr>

• CODES

  • Backgrounds

    • Background Code
    • Background Color
    • Background Image
    • Stretch Background
    • Fixed Background

    Marquees

    • Marquee Codes
    • Scrolling Text
    • Scrolling Images
    • Stop Marquee
    • Marquee Speed

    Text

    • Text Code
    • Font Code
    • Text Color
    • Line Height
    • Letter Spacing
    • Word Spacing
    • Overlapping Text

    Color

    • HTML Color Codes
    • HTML Color Chart
    • HTML Color Picker
    • HTML Color Tester
    • Color Code Generator

    Links

    • HTML Links
    • CSS Links
    • JavaScript Links
    • Email Links
    • CSS Cursor

    Scroll Boxes

    • Scroll Box Code
    • Scroll Box Color
    • Scroll Picture Box
    • Scroll Box Border
    • Horizontal Scrollbar
    • Vertical Scrollbar
    • Hide Scrollbar

    Image Codes

    • HTML Image Code
    • CSS Image Code
    • Link Image
    • Repeat Image
    • Image Border
    • Scrolling Images

    Textboxes

    • HTML Textbox Code
    • Textbox Color
    • Textbox Border
    • Textbox Image

• EDITORS

  • Online Editor

    HTML Generators

    • HTML Editor
    • HTML Generator
    • Text Generator
    • Heading Generator
    • Marquee Generator
    • Comment Box Generator

    MySpace Generators

    • MySpace Generator
    • MySpace Text Generator
    • MySpace Heading
    • MySpace Marquee Generator
    • MySpace Comment Box