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?
 
Change "position:fixed;" to "position:absolute;"
 
> 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).
 
Don't forget "background-position:top left;"
 
> 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?
 
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>
 
Do you have a screenshot or something so I can see what is goin wrong for sure?
 
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.
 
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.
 
if you don't want your background repeat, you might want to add this on the Background CSS: background-repeat: no-repeat;
 
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 The Helper:
    https://www.thehelper.net/pages/news/ is a link to the old news portal - i will integrate it into the interface somewhere when i figure it out
  • Ghan Ghan:
    Need to try something
  • Ghan Ghan:
    Hopefully this won't cause problems.
  • Ghan Ghan:
    Hmm
  • Ghan Ghan:
    I have converted the Headline News forum to an Article type forum. It will now show the top 20 threads with more detail of each thread.
  • Ghan Ghan:
    See how we like that.
  • The Helper The Helper:
    I do not see a way to go past the 1st page of posts on the forum though
  • The Helper The Helper:
    It is OK though for the main page to open up on the forum in the view it was before. As long as the portal has its own URL so it can be viewed that way I do want to try it as a regular forum view for a while
  • Ghan Ghan:
    Yeah I'm not sure what the deal is with the pagination.
  • Ghan Ghan:
    It SHOULD be there so I think it might just be an artifact of having an older style.
  • Ghan Ghan:
    I switched it to a "Standard" article forum. This will show the thread list like normal, but the threads themselves will have the first post set up above the rest of the "comments"
  • The Helper The Helper:
    I don't really get that article forum but I think it is because I have never really seen it used on a multi post thread
  • Ghan Ghan:
    RpNation makes more use of it right now as an example: https://www.rpnation.com/news/
  • The Helper The Helper:
  • The Helper The Helper:
    What do you think Tom?
  • tom_mai78101 tom_mai78101:
    I will have to get used to this.
  • tom_mai78101 tom_mai78101:
    The latest news feed looks good
  • The Helper The Helper:
    I would like to see it again like Ghan had it the first time with pagination though - without the pagination that view will not work but with pagination it just might...
  • The Helper The Helper:
    This drink recipe I have had more than a few times back in the day! Mind Eraser https://www.thehelper.net/threads/cocktail-mind-eraser.194720/
  • The Helper The Helper:
    Happy Thursday!
  • Ghan Ghan:
    I'm not so sure, there's still a lot of Thursday left for it to become unhappy.
    +3
  • The Helper The Helper:
    still a few hours
  • The Helper The Helper:
    Its Friday!!!!
    +1
  • Ghan Ghan:
    Thursday 7/10 would Thursday again
    +3

      The Helper Discord

      Members online

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top