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

Re: [NH] Background image

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


      Don't know how Word handles this though.

      Lotta
    • 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 2 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 3 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 4 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 5 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 6 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 7 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 8 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 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?

                      > 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 10 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 11 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 12 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.