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

Re: [NH] Background image

Expand Messages
  • Scott Fordin
    ... Keep in mind that, because there s no HTML or CSS way to stretch a background image, if you decide to use some external editor to create a stretched
    Message 1 of 12 , Jul 11, 2003
    • 0 Attachment
      loro wrote:
      >>That works, but as you said, it just places the jpg in the top left-hand
      >>corner. I want it to be a non-repeating background for the entire document,
      >>like wallpaper.
      >
      > 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.

      Keep in mind that, because there's no HTML or CSS way to
      "stretch" a background image, if you decide to use some
      external editor to create a stretched version of your
      image, you will also be increasing the image file size,
      which can quickly become too large for users to
      comfortably download. Another problem with using a
      single stretched background image is figuring out how
      large to make the image. What may be perfect at 640x480
      pixels will be relatively small on a 1024x768 or larger
      screen, thereby defeating your original goal. Conversely,
      making the image larger will not only make the file size
      huge, it'll be wasted on smaller screens because users
      won't be able to see it all.

      My strong recommendation is to use a small repeating
      image that is designed in such a way that the image
      "tiles" seamlessly. Another alternative is to lay
      your page out using tables, and to use your image as
      a table cell background. Finally, you can use a style
      sheet to position a single copy of your image aligned,
      centered, or at some precise location.

      Just remember, you don't want your design to get in
      the way of usability. There are many graphically cool
      looking pages out there that are utterly unreadable
      and/or impossible to navigate.

      Scott
    • 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 2 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 3 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 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?

            > 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 5 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 6 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 7 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.