Image Problems

Zedzy

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

mase

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

SFilip

Gone but not forgotten
Reaction score
634
> 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

mase

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

Zedzy

ℑΣÐℑΨ
Reaction score
41
SFilip said:
> 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).
Click to expand...

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

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

mase

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

SFilip

Gone but not forgotten
Reaction score
634
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

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

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;
 
S

SFilip

Gone but not forgotten
Reaction score
634
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.
 
You must log in or register to reply here.
General chit-chat
Help Users
  • No one is chatting at the moment.
  • Ghan Ghan:
    Still lurking
     +3
  • The Helper The Helper:
    I am great and it is fantastic to see you my friend!
     +1
  • The Helper The Helper:
    Here is a great appetizer recipe Texas style! https://www.thehelper.net/threads/recipe-chicken-stuffed-poblano-peppers.194086/
  • The Helper The Helper:
    If you are new to the site please check out the Recipe and Food Forum https://www.thehelper.net/forums/recipes-and-food.220/
  • Monovertex Monovertex:
    How come you're so into recipes lately? Never saw this much interest in this topic in the old days of TH.net
  • Monovertex Monovertex:
    Hmm, how do I change my signature?
  • tom_mai78101 tom_mai78101:
    Signatures can be edit in your account profile. As for the old stuffs, I'm thinking it's because Blizzard is now under Microsoft, and because of Microsoft Xbox going the way it is, it's dreadful.
  • The Helper The Helper:
    I am not big on the recipes I am just promoting them - I use the site as a practice place promoting stuff
     +2
  • Monovertex Monovertex:
    @tom_mai78101 I must be blind. If I go on my profile I don't see any area to edit the signature; If I go to account details (settings) I don't see any signature area either.
  • The Helper The Helper:
    You can get there if you click the bell icon (alerts) and choose preferences from the bottom, signature will be in the menu on the left there https://www.thehelper.net/account/preferences
  • The Helper The Helper:
    I think I need to split the Sci/Tech news forum into 2 one for Science and one for Tech but I am hating all the moving of posts I would have to do
  • The Helper The Helper:
    New dessert for Summer - https://www.thehelper.net/threads/recipe-lemon-blueberry-layer-cheesecake.194113/
  • The Helper The Helper:
    What is up Old Mountain Shadow?
  • The Helper The Helper:
    Happy Thursday!
     +1
  • Varine Varine:
    Crazy how much 3d printing has come in the last few years. Sad that it's not as easily modifiable though
  • Varine Varine:
    I bought an Ender 3 during the pandemic and tinkered with it all the time. Just bought a Sovol, not as easy. I'm trying to make it use a different nozzle because I have a fuck ton of Volcanos, and they use what is basically a modified volcano that is just a smidge longer, and almost every part on this thing needs to be redone to make it work
  • Varine Varine:
    Luckily I have a 3d printer for that, I guess. But it's ridiculous. The regular volcanos are 21mm, these Sovol versions are about 23.5mm
  • Varine Varine:
    So, 2.5mm longer. But the thing that measures the bed is about 1.5mm above the nozzle, so if I swap it with a volcano then I'm 1mm behind it. So cool, new bracket to swap that, but THEN the fan shroud to direct air at the part is ALSO going to be .5mm to low, and so I need to redo that, but by doing that it is a little bit off where it should be blowing and it's throwing it at the heating block instead of the part, and fuck man
  • Varine Varine:
    I didn't realize they designed this entire thing to NOT be modded. I would have just got a fucking Bambu if I knew that, the whole point was I could fuck with this. And no one else makes shit for Sovol so I have to go through them, and they have... interesting pricing models. So I have a new extruder altogether that I'm taking apart and going to just design a whole new one to use my nozzles. Dumb design.
  • Varine Varine:
    Can't just buy a new heatblock, you need to get a whole hotend - so block, heater cartridge, thermistor, heatbreak, and nozzle. And they put this fucking paste in there so I can't take the thermistor or cartridge out with any ease, that's 30 dollars. Or you can get the whole extrudor with the direct driver AND that heatblock for like 50, but you still can't get any of it to come apart
  • Varine Varine:
    Partsbuilt has individual parts I found but they're expensive. I think I can get bits swapped around and make this work with generic shit though
  • Ghan Ghan:
    Heard Houston got hit pretty bad by storms last night. Hope all is well with TH.
  • The Helper The Helper:
    Power back on finally - all is good here no damage
     +2
  • V-SNES V-SNES:
    Happy Friday!
     +1
  • The Helper The Helper:
    New recipe is another summer dessert Berry and Peach Cheesecake - https://www.thehelper.net/threads/recipe-berry-and-peach-cheesecake.194169/

      The Helper Discord

      Members online

      Online now:
      98 (members: 1, guests: 97)

      Share this page

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top