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

RE: [NH] Background image

Expand Messages
  • loro
    ... 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
    Message 1 of 12 , Jul 11, 2003
    • 0 Attachment
      At 16:43 2003.07.11, you 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.

      Lotta
    • Wright, John - Textron Financial
      Ok, thanks. ... From: loro [mailto:loro@home.se] Sent: Friday, July 11, 2003 10:57 AM To: ntb-html@yahoogroups.com Subject: RE: [NH] Background image ... You
      Message 2 of 12 , Jul 11, 2003
      • 0 Attachment
        Ok, thanks.

        -----Original Message-----
        From: loro [mailto:loro@...]
        Sent: Friday, July 11, 2003 10:57 AM
        To: ntb-html@yahoogroups.com
        Subject: RE: [NH] Background image


        At 16:43 2003.07.11, you 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.

        Lotta







        Your use of Yahoo! Groups is subject to http://docs.yahoo.com/info/terms/
      • 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 3 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 4 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 5 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 6 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 7 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 8 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 9 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.