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

RE: [NH] Background image

Expand Messages
  • Wright, John - Textron Financial
    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
    Message 1 of 12 , Jul 11, 2003
    • 0 Attachment
      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.

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



      >I'm trying to create a html document using a .jpg as the background image.
      I
      >then want to save it as a Word document. The only problem I'm having is
      that
      >the jpg repeats (shows multiple copies of the jpg). Does anyone know how to
      >do this without the background repeating.

      You need CSS for that. If all you want is a non-repeating image in the top
      left corner of the document put this in HEAD.

      <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.
      < http://www.w3.org/TR/REC-CSS2/colors.html
      <http://www.w3.org/TR/REC-CSS2/colors.html> >


      Don't know how Word handles this though.

      Lotta




      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=386393529>

      Your use of Yahoo! Groups is subject to the Yahoo! Terms of Service
      <http://docs.yahoo.com/info/terms/> .
    • Don Passenger
      http://www.codeave.com/css/code.asp?u_log=4014 should do it for you there are more elaborate ways to include css of course as you get better at it be aware
      Message 2 of 12 , Jul 11, 2003
      • 0 Attachment
        http://www.codeave.com/css/code.asp?u_log=4014
        should do it for you
        there are more elaborate ways to include css of course as you get better at
        it
        be aware that it will still probably repeat for those still on Netscape 4.x,
        but that is a rapidly diminishing group.

        --

        Don Passenger

        If you need an html fix visit
        http://www.htmlfixit.com

        html/perl/php/xhtml/javascript presented
        in easy tutorials with live help and forums
        to fix your problems
        ----- Original Message -----
        From: "Wright, John - Textron Financial" <JWright@...>
        To: <ntb-html@yahoogroups.com>
        Sent: Friday, July 11, 2003 9:35 AM
        Subject: [NH] Background image


        > I'm trying to create a html document using a .jpg as the background image.
        I
        > then want to save it as a Word document. The only problem I'm having is
        that
        > the jpg repeats (shows multiple copies of the jpg). Does anyone know how
        to
        > do this without the background repeating.
        >
        > John
        >
        >
        >
        >
        > Your use of Yahoo! Groups is subject to http://docs.yahoo.com/info/terms/
        >
        >
      • 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 3 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 4 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 5 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 6 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 7 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 8 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 9 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 10 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 11 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.