HTMLHelp Forums > Infinitely zooming background image?

joyful

Feb 9 2011, 12:08 AM

Is it posable to make the background image of a HTML page infinitely zoom?
I am aware that on a big screen this image would pixelate, though this does not bother me.
Also, I am aware of the options (tile, background color, ect.), but I would like to know if a Infinitely zooming background image is possible.

Thanks in advance.

--

pandy

Feb 9 2011, 12:25 AM

No, not even finitely zooming. Backgrounds don't stretch. Yet - it's in CSS 3.

You can fake it by positioning an inline image behind the rest of the content (width="100%", leave height out and the browser will keep the aspect ratio).

joyful

Feb 9 2011, 01:57 AM

QUOTE(pandy @ Feb 9 2011, 12:25 AM)

No, not even finitely zooming. Backgrounds don't stretch. Yet - it's in CSS 3.

You can fake it by positioning an inline image behind the rest of the content (width="100%", leave height out and the browser will keep the aspect ratio).

Thanks for the reply.

Is this what the CSS would look like to "fake" this?:

CODE

body {
                background-image:url(css/images/index2.jpg);
                background-repeat: no-repeat;
                background-position: 100%;
            }

Darin McGrew

Feb 9 2011, 11:58 AM

QUOTE

Is this what the CSS would look like to "fake" this?:

No. That's just a positioned, non-repeating background image, positioned on the far right, but centered vertically.

joyful

Feb 9 2011, 12:24 PM

QUOTE(Darin McGrew @ Feb 9 2011, 11:58 AM)

QUOTE

Is this what the CSS would look like to "fake" this?:

No. That's just a positioned, non-repeating background image, positioned on the far right, but centered vertically.

What is the CSS you would use for this?

Darin McGrew

Feb 9 2011, 12:43 PM

I wouldn't. Rather than trying to resize a single background image, I'd use multiple background images, as shown in these examples:
http://www.w3.org/Style/Examples/007/roundshadow
http://www.alistapart.com/articles/customcorners/
http://www.alistapart.com/articles/customcorners2/

pandy

Feb 9 2011, 01:13 PM

I wouldn't do it for a whole page either, but the concept is to position an ordinary image (that is scalable) behind the content or the other way around. The below ain't pretty, but you can see how it's done.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title></title>
<style type="text/css">

</style>

</head>

<body>

<div><img src="http://forums.htmlhelp.com/uploads/av-3.jpg" width="100%" alt="Darin"></div>

<div id="content">
<h1>This is my Darin fan site</h1>
<p>
All content goes in the #content DIV</p>
<p>
Darin for president!</p>
<p>
Yeah!</p>
</div>

</body>
</html>

joyful

Feb 9 2011, 01:54 PM

QUOTE(pandy @ Feb 9 2011, 01:13 PM)

I wouldn't do it for a whole page either, but the concept is to position an ordinary image (that is scalable) behind the content or the other way around. The below ain't pretty, but you can see how it's done.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title></title>
<style type="text/css">

</style>

</head>

<body>

<div><img src="http://forums.htmlhelp.com/uploads/av-3.jpg" width="100%" alt="Darin"></div>

<div id="content">
<h1>This is my Darin fan site</h1>
<p>
All content goes in the #content DIV</p>
<p>
Darin for president!</p>
<p>
Yeah!</p>
</div>

</body>
</html>

Ok, this is the code I used:

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>
        <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
        <meta name="copyright" content="Copyright � 1990-2006 Portia Munson, All Rights Reserved">
        <meta name="description" content="Portia Munson is a visual artist who works in a variety of media including installation, painting, photography and sculpture.">
        <title>Portia Munson</title>
        <link href="css/style.css" type="text/css" rel="stylesheet" media="screen" />
        <style type="text/css">

            body { margin: 0; padding: 0;
            font: bold 200% sans-serif;
            color: #fff; background: transparent }
            #content { position: absolute; top: 0 }

            html > body { font-size: 10px; }
            h1 {
            color: #dc5c06;
            float: right;
            font: normal 3.0em/1.0em Georgia, serif;
            right:50px;
            position: relative;
            text-align: center;
            top: 21px;
            }
            a {
                color: #fef59a;
                text-decoration: none;
            }
            a:hover {
                color: #FFF;
            }
        </style>
        <meta name="verify-v1" content="n49F5pn/+rp35cKmP9avkRcnJNZ9jIfLK1vg5Umc34Y=" />
</head>

<body>

<h1 style="position:absolute; margin-right:-10px;">portiamunson.com <a href="home.html" title="Portia Munson Home">enter</a></h1>
<div><img src="index2.jpg" width="100%" alt="image"></div>
</div>

</body>
</html>

You can see the results here
This method worked when I locally tested out side of my root folder, but when I put it in my root folder (it is the index) it will not "zoom"
What is the issue?

--

pandy

Feb 9 2011, 02:10 PM

The H1 is position: relative in the style sheet. Make it absolute in the style sheet and you don't need the inline style.

Actually though, I thought inline style would override a declaration in the style sheet. Have i missed some development here?

Another thing, don't position single elements relative the viewport. Rather wrap them in a DIV and position the whole division in one fell swoop.

joyful

Feb 9 2011, 03:46 PM

QUOTE(pandy @ Feb 9 2011, 02:10 PM)

The H1 is position: relative in the style sheet. Make it absolute in the style sheet and you don't need the inline style.

Actually though, I thought inline style would override a declaration in the style sheet. Have i missed some development here?

Another thing, don't position single elements relative the viewport. Rather wrap them in a DIV and position the whole division in one fell swoop.

Thank you!
You have resolved my issue.
As soon as I removed

CODE

it worked!
Thanks again!

pandy

Feb 9 2011, 04:39 PM

It did? I never even looked at that. I changed the positioning in the embedded style sheet in HEAD to absolute. Odd.