How to stretch a background image over the entire background?

Discussion in 'CSS' started by Devana, Sep 22, 2009.

0
  1. #1
    How can I take a small image and get it to "stretch" over the entire background of the website without any lines or repeated images and still keep the image like it is?

    Is it possible?

    :)
     
    Devana, Sep 22, 2009 IP
  2. Cippo_ro

    Cippo_ro Peon

    Messages:
    45
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I'm not sure if you can do it only with css.
     
    Cippo_ro, Sep 22, 2009 IP
  3. MhW

    MhW Active Member

    Messages:
    370
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    85
    #3
    It's impossible to "stretch" a background image using CSS, and even more impossible to keep its quality. I'm afraid your only options are to tile it, or choose a background image that's large enough to accommodate all screen resolutions.
     
    MhW, Sep 22, 2009 IP
  4. Devana

    Devana Well-Known Member

    Messages:
    987
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    130
    #4
    Thanks for the help. I'll try to make the image large enough then :)
     
    Devana, Sep 22, 2009 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    Well, that's not ENTIRELY true... It CAN be done if you use a IMG tag instead of the background property with just a wee bit of CSS trickery - it just usually ends up looking like ass given how the different browsers resize images.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<style type="text/css">
* {
	margin:0;
	padding:0;
}

html, body {
	position:relative; /* fix opera quirk */
	overflow:hidden;
	width:100%;
	height:100%;
}

#stretchBackground {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border:0;
}

#pageWrapper {
	position:absolute;
	top:0;
	left:0;
	overflow:auto;
	width:100%;
	height:100%;
}
</style>


<title>
	baseline template
</title>

</head><body>

<!--
	empty tags like SPAN and B below are image sandbags for
	sliding doors or glider-levin replacement - do not remove!!!
-->

<div><img 
	src="http://www.google.com/intl/en_ALL/images/logo.gif"
	id="stretchBackground"
	alt=""
/></div>

<div id="pageWrapper">
	<p>Some test content</p>
	<p>Some test content</p>
	<p>Some test content</p>
	<p>Some test content</p>
	<p>Some test content</p>
	<p>Some test content</p>
	<p>Some test content</p>
	<p>Some test content</p>
	<p>Some test content</p>
	<p>Some test content</p>
	<p>Some test content</p>
	<p>Some test content</p>
	<p>Some test content</p>
<!-- #pageWrapper --></div>

</body></html>
    Code (markup):
    It's ugly, but it works. Generally the larger your source image the better it will look. Basically the trick is to make a content wrapper to which scrollbars are applied... best of all this gives you position:fixed on that image as well.
     
    deathshadow, Sep 28, 2009 IP