Loading ...
Sorry, an error occurred while loading the content.

Re: [NH] Background image

Expand Messages
  • Don Passenger
    The most common way is to make the background image wider than any possible resolution, but that is clunky if the image is more than a few pixels high because
    Message 1 of 12 , Jul 11, 2003
    • 0 Attachment
      The most common way is to make the background image wider than any possible
      resolution, but that is clunky if the image is more than a few pixels high
      because of the image file size. That isn't stretching of course.

      Well you can actually do it ... stretch that is ... just not with straight
      css or html
      One way is with a layer, specify the size of the image to be placed in that
      layer and it will stretch and set the z index for that layer to make it the
      base layer. More on that if anyone cares later, let me know.

      Javascript offers some options, see:
      http://www.webreference.com/dhtml/diner/bgresize/bgresize3.html

      You can do a pixel drag .... see this page:
      http://www.h1de.us/friends/main.html
      which lays this image as the background: http://www.h1de.us/street_edge2.jpg
      and repeats it, then lays the building in the body up and to the left.

      I really like this effect. It was done by a former html student of mine ...
      who decided that after I taught him everything I knew, that wasn't enough
      ... so he continues on.

      Here is his coding to achieve that look:
      <body bgcolor="black" text="white" link="white" vlink="white"
      alink="#333333" style="background: black url(../street_edge2.jpg) repeat-x
      scroll 0% 0%;">
      <img src="../street2.jpg" width="188" height="251" border="0" align="middle"
      alt="street scene" style="position: absolute; left:0px; top:0px;"/>

      It relys on street2.jpg and street_edge2.jpg lining up exactly ... which I
      think it does on most browsers with his coding.



      > You mean you want a small background image to stretch? Maybe Word has a
      > method for it. HTML and CSS have not.
      >
      > You could stretch an ordinary image and place it behind the rest but that
      > seems like overkill.
    • Wright, John - Textron Financial
      Very cool ... From: Don Passenger [mailto:dpasseng@iserv.net] Sent: Friday, July 11, 2003 11:56 AM To: ntb-html@yahoogroups.com Subject: Re: [NH] Background
      Message 2 of 12 , Jul 11, 2003
      • 0 Attachment
        Very cool

        -----Original Message-----
        From: Don Passenger [mailto:dpasseng@...]
        Sent: Friday, July 11, 2003 11:56 AM
        To: ntb-html@yahoogroups.com
        Subject: Re: [NH] Background image


        The most common way is to make the background image wider than any possible
        resolution, but that is clunky if the image is more than a few pixels high
        because of the image file size. That isn't stretching of course.

        Well you can actually do it ... stretch that is ... just not with straight
        css or html
        One way is with a layer, specify the size of the image to be placed in that
        layer and it will stretch and set the z index for that layer to make it the
        base layer. More on that if anyone cares later, let me know.

        Javascript offers some options, see:
        http://www.webreference.com/dhtml/diner/bgresize/bgresize3.html
        <http://www.webreference.com/dhtml/diner/bgresize/bgresize3.html>

        You can do a pixel drag .... see this page:
        http://www.h1de.us/friends/main.html <http://www.h1de.us/friends/main.html>
        which lays this image as the background: http://www.h1de.us/street_edge2.jpg
        <http://www.h1de.us/street_edge2.jpg>
        and repeats it, then lays the building in the body up and to the left.

        I really like this effect. It was done by a former html student of mine ...
        who decided that after I taught him everything I knew, that wasn't enough
        ... so he continues on.

        Here is his coding to achieve that look:
        <body bgcolor="black" text="white" link="white" vlink="white"
        alink="#333333" style="background: black url(../street_edge2.jpg) repeat-x
        scroll 0% 0%;">
        <img src="../street2.jpg" width="188" height="251" border="0" align="middle"
        alt="street scene" style="position: absolute; left:0px; top:0px;"/>

        It relys on street2.jpg and street_edge2.jpg lining up exactly ... which I
        think it does on most browsers with his coding.



        > You mean you want a small background image to stretch? Maybe Word has a
        > method for it. HTML and CSS have not.
        >
        > You could stretch an ordinary image and place it behind the rest but that
        > seems like overkill.



        Yahoo! Groups Sponsor

        ADVERTISEMENT

        <http://rd.yahoo.com/M=194081.3551198.4824677.1261774/D=egroupweb/S=17053756
        18:HM/A=1663535/R=0/SIG=11ps6rfef/*http://www.ediets.com/start.cfm?code=3050
        4&media=atkins> click here

        <http://us.adserver.yahoo.com/l?M=194081.3551198.4824677.1261774/D=egroupmai
        l/S=:HM/A=1663535/rand=746633763>

        Your use of Yahoo! Groups is subject to the Yahoo! Terms of Service
        <http://docs.yahoo.com/info/terms/> .
      • Scott Fordin
        ... Depending on the image, you re going to get a lot ragged pixels if you resize this way, no? ... Oooh... Now *that* is cool. Your student has done well,
        Message 3 of 12 , Jul 11, 2003
        • 0 Attachment
          Don Passenger wrote:
          > Javascript offers some options, see:
          > http://www.webreference.com/dhtml/diner/bgresize/bgresize3.html

          Depending on the image, you're going to get a lot ragged
          pixels if you resize this way, no?

          > You can do a pixel drag .... see this page:
          > http://www.h1de.us/friends/main.html
          > which lays this image as the background: http://www.h1de.us/street_edge2.jpg
          > and repeats it, then lays the building in the body up and to the left.

          Oooh... Now *that* is cool. Your student has done
          well, Sensai.

          Scott
        • Don Passenger
          ... Quality could certainly be an issue, especially for a sharper image vs something abstract or fuzzy to begin with.
          Message 4 of 12 , Jul 11, 2003
          • 0 Attachment
            > Don Passenger wrote:
            > > Javascript offers some options, see:
            > > http://www.webreference.com/dhtml/diner/bgresize/bgresize3.html
            >
            > Depending on the image, you're going to get a lot ragged
            > pixels if you resize this way, no?

            Quality could certainly be an issue, especially for a sharper image vs
            something abstract or fuzzy to begin with.
          • liebenbc@wghs.co.za
            Hey I know this is delaid, but firstly I m new ... And then I tried the following code... ... But I m confused. It doesn t quite wanna work, I think I may be
            Message 5 of 12 , Jul 24, 2003
            • 0 Attachment
              Hey I know this is delaid, but firstly I'm new
              >>"Hello"
              And then I tried the following code...

              > <style type="text/css">
              > <!--
              > body { background: url(path/to/pic.gif) no-repeat }
              > -->
              > </style>
              >
              > If you want the image to repeat in one direction or be placed somewhere
              > else you have to add some more stuff.

              But I'm confused. It doesn't quite wanna work, I think I may be doing a little thing
              wrong, like when I did an alert with JavaScript I put the "< SCRIPT >" tag before the
              "-->" tag. So this is what I have for that...

              <style type="text/css">
              <!--
              body { background: url(www.geocities.com/original_rock4u2nv/badstuff.html/mans
              on.gif) no-repeat }

              -->
              </style>

              I'm also not sure if its because I have JavaScript within the entire coding as well.
              Perhaps it clashes?
            • lloyd2
              Hi, I haven t been doing embedded Style sheets but for linked Style sheets mine looks something like this: body.dimple { background : url(./image/dimple.jpg) }
              Message 6 of 12 , Jul 24, 2003
              • 0 Attachment
                Hi,

                I haven't been doing embedded Style sheets but for linked Style sheets mine
                looks something like this: body.dimple { background :
                url(./image/dimple.jpg) } and the code looks like this:

                </HEAD>

                <body class="dimple">

                As you can tell by my using class, I use more than one background on
                different pages. You will also notice when I stop the head I start the body
                with the body background. This background repeats all over the page.

                I use java in some of my pages and it doesn't seem to bother anything.

                Lloyd
                ~~~~~~~~~~~~~~~~~~~~
                >Hey I know this is delaid, but firstly I'm new
                > >>"Hello"
                >And then I tried the following code...
                >
                > > <style type="text/css">
                > > <!--
                > > body { background: url(path/to/pic.gif) no-repeat }
                > > -->
                > > </style>
              Your message has been successfully submitted and would be delivered to recipients shortly.