Image Problems

Zedzy

ℑΣÐℑΨ
Reaction score
41
Okay, so I decided to have an image using the img tag for a background, because I didn't like my background image repeating, and didn't know how to make it fill the page. When I finished I got this:

Code:
<html>
<head>
<style type="text/css">
.rgtbor
{
border-right: medium solid #cccccc
}
p
{
text-indent: 1cm
}
.mtable
{
margin: 10%;
background-color: #000000;
}
body
{
color: #ffffff;
}
img.bckg
{
position:fixed;
width: 98%;
height: 98%;
top:0%;
left:0%;
z-index:-1
}
</style>
</head>
<body>

<table border="0" cellpadding="10" width="80%" class="mtable">
      <tr>
        <td colspan="2">
          <h1 align="right">
<u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Page Name</u>
          </h1>
        </td>
      </tr>
      <tr>
        <td width="15%" class="rgtbor" valign="top">
          <h4>
            Navagation
          </h4>
          <ul>
            <li>
              Page 1
            </li>
            <li>
              Page 2
            </li>
            <li>
              Page 3
            </li>
            <li>
              Page 4
            </li>
            <li>
              Page 5
            </li>
          </ul>
        </td>
        <td width="65%">
          <h2 align="center">
            Content Heading
          </h2>
          <p>
            All of the content would go here. All of the content would go here.
          </p>
        </td>
      </tr>
    </table>
    <table border="0" cellpadding="10" width="80%" class="mtable">
      <tr>
        <td width="65%">
          <h2 align="center">
            Content Heading
          </h2>
          <p>
            All of the content would go here. All of the content would go here.
          </p>
        </td>
      </tr>
    </table>
<table border="0" cellpadding="10" width="80%" class="mtable">
      <tr>
        <td width="65%">
          <h2 align="center">
            Content Heading
          </h2>
          <p>
            All of the content would go here. All of the content would go here.
          </p>
        </td>
      </tr>
    </table>
<img class="bckg" src="http://www.wallpaper.cz/primo/old_ir/warcraft3nightelfs2--c1600xc1200.jpg" width="95" height="84" />

</body>
</html>

It worked great in the little box for the Tryit Editor (found here(just copy and paste the code in the little box and click "Edit the text and click me" button)) but when I tried it in firefox there was no image (I even used firefox while using the Tryit Editor). Curious I tried Internet Explorer, there was no background image, but instead the image was at the bottom of the page.

Why would it work for the Tryit Editor, but not a full browser view? Does it work for you?
 

mase

____ ___ ____ __
Reaction score
154
Change "position:fixed;" to "position:absolute;"
 

SFilip

Gone but not forgotten
Reaction score
633
> Change "position:fixed;" to "position:absolute;"
I don't think that's how he wants it to look though.

Changing your body CSS into this will get you the same effect...
Code:
body
{
color: #ffffff;
background: url(http://www.wallpaper.cz/primo/old_ir/warcraft3nightelfs2--c1600xc1200.jpg) no-repeat fixed;
}
However, the picture you're using is huge - more than 1MB - and this way the background won't appear until it fully loads. I suggest finding a better picture or compressing this one a bit.
Your solution doesn't work in IE because IE doesn't support position:fixed (until version 7). No idea about Firefox (seems to work in version 3, but not before that).
 

mase

____ ___ ____ __
Reaction score
154
Don't forget "background-position:top left;"
 

Zedzy

ℑΣÐℑΨ
Reaction score
41
> Change "position:fixed;" to "position:absolute;"
I don't think that's how he wants it to look though.

Changing your body CSS into this will get you the same effect...
Code:
body
{
color: #ffffff;
background: url(http://www.wallpaper.cz/primo/old_ir/warcraft3nightelfs2--c1600xc1200.jpg) no-repeat fixed;
}
However, the picture you're using is huge - more than 1MB - and this way the background won't appear until it fully loads. I suggest finding a better picture or compressing this one a bit.
Your solution doesn't work in IE because IE doesn't support position:fixed (until version 7). No idea about Firefox (seems to work in version 3, but not before that).

The image is temporary.

If I do that will the picture fill the entire screen? Also, why did it work in the Tryit editor?

Edit: How can you make it show the picture for the entire screen?
 

mase

____ ___ ____ __
Reaction score
154
Well you would need a bigger picture. I suggest you do this:

Code:
<style>
body{
background-color:#000000;
background-image:url(http://www.wallpaper.cz/primo/old_ir/warcraft3nightelfs2--c1600xc1200.jpg);
background-postion:center middle;
background-attachment:fixed;
background-repeat:no-repeat;
}
</style>
 

mase

____ ___ ____ __
Reaction score
154
Do you have a screenshot or something so I can see what is goin wrong for sure?
 

SFilip

Gone but not forgotten
Reaction score
633
You're right, seems my method doesn't stretch the picture if it's smaller than the browser window...
Some googling found me this article on the subject, it's actually the same thing you originally wanted to do, but works with Firefox2. Seems it was a problem with a negative z-index, works if you put the rest of the page (everything except for the img) inside a div tag and then specify z-index:1;position:relative; for it. Also features a workaround for IE, but still won't make it look quite as good as in other browsers.
 

Zedzy

ℑΣÐℑΨ
Reaction score
41
This is what I have now, it works wonderfully in Firefox but appears at the bottom of the page even though I followed the tutorial. Here's the code:

Code:
<html>
<head>
<style type="text/css">
.rgtbor
{
border-right: medium solid #cccccc
}
p
{
text-indent: 1cm
}
.mtable
{
margin: 10%;
background-color: #000000;
}
body
{
color: #ffffff;
}
img#bckg
{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
#content
{
position:relative;
z-index:2;
}
</style>
<!--[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
#bckg { position:absolute; z-index:1; }
#content { position:static; }
</style>
<![endif]-->
</head>
<body>

<div id="content"><table border="0" cellpadding="10" width="80%" class="mtable">
      <tr>
        <td colspan="2">
          <h1 align="right">
<u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Page Name</u>
          </h1>
        </td>
      </tr>
      <tr>
        <td width="15%" class="rgtbor" valign="top">
          <h4>
            Navagation
          </h4>
          <ul>
            <li>
              Page 1
            </li>
            <li>
              Page 2
            </li>
            <li>
              Page 3
            </li>
            <li>
              Page 4
            </li>
            <li>
              Page 5
            </li>
          </ul>
        </td>
        <td width="65%">
          <h2 align="center">
            Content Heading
          </h2>
          <p>
            All of the content would go here. All of the content would go here.
          </p>
        </td>
      </tr>
    </table>
    <table border="0" cellpadding="10" width="80%" class="mtable">
      <tr>
        <td width="65%">
          <h2 align="center">
            Content Heading
          </h2>
          <p>
            All of the content would go here. All of the content would go here.
          </p>
        </td>
      </tr>
    </table>
<table border="0" cellpadding="10" width="80%" class="mtable">
      <tr>
        <td width="65%">
          <h2 align="center">
            Content Heading
          </h2>
          <p>
            All of the content would go here. All of the content would go here.
          </p>
        </td>
      </tr>
    </table></div>
<img id="bckg" src="http://www.wallpaper.cz/primo/old_ir/warcraft3nightelfs2--c1600xc1200.jpg" width="95" height="84" />

</body>
</html>

Thanks for the help so far SFilip +rep.
 

ertaboy356b

Old School Gamer
Reaction score
86
if you don't want your background repeat, you might want to add this on the Background CSS: background-repeat: no-repeat;
 

SFilip

Gone but not forgotten
Reaction score
633
Finally found a solution thanks to this page.
Add these two to your img#bckg style (you can remove the IE only part afterwards:
Code:
_position:absolute;
_top:expression(eval(document.body.scrollTop));
Here's the complete page:
Code:
<html>
<head>
<style type="text/css">
.rgtbor
{
border-right: medium solid #cccccc
}
p
{
text-indent: 1cm
}
.mtable
{
margin: 10%;
background-color: #000000;
}
body
{
color: #ffffff;
}
img#bckg
{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
_position:absolute;
_top:expression(eval(document.body.scrollTop));
}
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
#content
{
position:relative;
z-index:2;
}
</style>
</head>
<body>

<div id="content"><table border="0" cellpadding="10" width="80%" class="mtable">
      <tr>
        <td colspan="2">
          <h1 align="right">
<u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Page Name</u>
          </h1>
        </td>
      </tr>
      <tr>
        <td width="15%" class="rgtbor" valign="top">
          <h4>
            Navagation
          </h4>
          <ul>
            <li>
              Page 1
            </li>
            <li>
              Page 2
            </li>
            <li>
              Page 3
            </li>
            <li>
              Page 4
            </li>
            <li>
              Page 5
            </li>
          </ul>
        </td>
        <td width="65%">
          <h2 align="center">
            Content Heading
          </h2>
          <p>
            All of the content would go here. All of the content would go here.
          </p>
        </td>
      </tr>
    </table>
    <table border="0" cellpadding="10" width="80%" class="mtable">
      <tr>
        <td width="65%">
          <h2 align="center">
            Content Heading
          </h2>
          <p>
            All of the content would go here. All of the content would go here.
          </p>
        </td>
      </tr>
    </table>
<table border="0" cellpadding="10" width="80%" class="mtable">
      <tr>
        <td width="65%">
          <h2 align="center">
            Content Heading
          </h2>
          <p>
            All of the content would go here. All of the content would go here.
          </p>
        </td>
      </tr>
    </table></div>
<img id="bckg" src="http://www.wallpaper.cz/primo/old_ir/warcraft3nightelfs2--c1600xc1200.jpg" width="95" height="84" />

</body>
</html>
It looks a little jumpy, but still quite nice considering it simulates something IE doesn't really support. If you want to go further, this might make it look smoother, but I didn't try it myself.
 
General chit-chat
Help Users
  • No one is chatting at the moment.

      The Helper Discord

      Staff online

      Members online

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top