Multiple backgrounds

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Johan
    #1

    Multiple backgrounds

    I can set/change a background with:

    document.getEle mentById("photo div").style.bac kground =
    "#282828 url(../img/pict_1.jpg)";

    How do I set/change multiple backgrounds using javascript?
    Tags: None
    • Laser Lips
      #2
      Re: Multiple backgrounds

      On Aug 25, 8:37 pm, Johan <por...@can.spa mwrote:
      I can set/change a background with:
      >
      document.getEle mentById("photo div").style.bac kground =
      "#282828 url(../img/pict_1.jpg)";
      >
      How do I set/change multiple backgrounds using javascript?
      Repeat that line for each div?

        Comment

        • SAM
          #3
          Re: Multiple backgrounds

          Johan a écrit :
          I can set/change a background with:
          >
          document.getEle mentById("photo div").style.bac kground =
          "#282828 url(../img/pict_1.jpg)";
          >
          How do I set/change multiple backgrounds using javascript?
          The easiest way is to use a class in the body tag

          document.body.c lassName = 'back_1';
          document.body.c lassName = 'back_2';

          CSS :
          =====
          ..back_1 { background: yellow; }
          ..back_1 div { background: url(../img/pict_1.jpg) }
          ..back_1 div.special { background: #282828 }
          ..back_2 { background: white; }
          ..back_1 div { background: url(../img/pict_2.jpg) }
          /* and so on */


          Or using a loop on elements to change :

          var D = document.getEle mementsByTagNam e('DIV');
          for(var i=0, n = D.length; i<n; i++)
          D[i].style.backgrou nd="#282828 url(../img/pict_1.jpg)";


          You can also use alternative style sheets

          --
          sm

            Comment

            • Johan
              #4
              Re: Multiple backgrounds

              SAM wrote:
              Johan a écrit :
              >
              >I can set/change a background with:
              >>
              >document.getEl ementById("phot odiv").style.ba ckground =
              >"#282828 url(../img/pict_1.jpg)";
              >>
              >How do I set/change multiple backgrounds using javascript?
              >
              >
              The easiest way is to use a class in the body tag
              >
              document.body.c lassName = 'back_1';
              document.body.c lassName = 'back_2';
              >
              CSS :
              =====
              .back_1 { background: yellow; }
              .back_1 div { background: url(../img/pict_1.jpg) }
              .back_1 div.special { background: #282828 }
              .back_2 { background: white; }
              .back_1 div { background: url(../img/pict_2.jpg) }
              /* and so on */
              >
              >
              Or using a loop on elements to change :
              >
              var D = document.getEle mementsByTagNam e('DIV');
              for(var i=0, n = D.length; i<n; i++)
              D[i].style.backgrou nd="#282828 url(../img/pict_1.jpg)";
              >
              >
              You can also use alternative style sheets
              >
              Thank for your suggestions.

              However, my question is how I can set/change multiple backgrounds with
              javascript. I think I wasn't clear but they should appear in one div.


              You can set them with css in this way:
              #show {
              background-image:
              url("images/pict_1.jpg"),
              url("images/pict_2.jpg"),
              url("images/pict_3.jpg"),
              url("images/pict_4.jpg");
              background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
              background-position: top left, top right, bottom right, bottom left;
              }
              Note: it's one sigle div.

              Now I want to change them with javascript.

                Comment

                • Johan
                  #5
                  Re: Multiple backgrounds

                  Laser Lips wrote:
                  On Aug 25, 8:37 pm, Johan <por...@can.spa mwrote:
                  >
                  >>I can set/change a background with:
                  >>
                  >>document.getE lementById("pho todiv").style.b ackground =
                  >>"#282828 url(../img/pict_1.jpg)";
                  >>
                  >>How do I set/change multiple backgrounds using javascript?
                  >
                  >
                  Repeat that line for each div?
                  They should appear in one div.

                    Comment

                    • Robin Rattay
                      #6
                      Re: Multiple backgrounds

                      On 26 Aug., 16:06, Johan <por...@can.spa mwrote:
                      SAM wrote:
                      You can set them with css in this way:
                      #show {
                         background-image:
                           url("images/pict_1.jpg"),
                           url("images/pict_2.jpg"),
                           url("images/pict_3.jpg"),
                           url("images/pict_4.jpg");
                         background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
                         background-position: top left, top right, bottom right, bottom left;}
                      You are aware, that this is CSS3 and is currently supported only by
                      Safari and KHTML-based browsers?
                      Now I want to change them with javascript.
                      Basically by combining the what you posted in your original post and
                      here:

                      var theDivStyle = document.getEle mentById("photo div").style;
                      theDivStyle.bac kgroundImage = 'url("images/pict_1.jpg"), url("images/
                      pict_2.jpg"), url("images/pict_3.jpg"), url("images/pict_4.jpg")';
                      theDivStyle.bac kgroundRepeat = 'no-repeat, no-repeat, no-repeat, no-
                      repeat';
                      theDivStyle.bac kgroundPosition = 'top left, top right, bottom right,
                      bottom left';

                      Or by using the shorthand property as in CSS

                      theDivStyle.bac kground = 'url("images/pict_1.jpg") no-repeat top left,
                      url("images/pict_2.jpg") no-repeat top right, ...'; /* abbreviated */

                      (watch the line breaks)

                      Robin

                        Comment

                        • SAM
                          #7
                          Re: Multiple backgrounds

                          Johan a écrit :
                          >
                          However, my question is how I can set/change multiple backgrounds with
                          javascript. I think I wasn't clear but they should appear in one div.
                          >
                          You can set them with css in this way:
                          ??? in which navigator can you have this kind of CSS ?
                          (my Fx told me it is not good)
                          #show {
                          background-image:
                          url("images/pict_1.jpg"),
                          url("images/pict_2.jpg"),
                          url("images/pict_3.jpg"),
                          url("images/pict_4.jpg");
                          background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
                          background-position: top left, top right, bottom right, bottom left;
                          }
                          Note: it's one sigle div.
                          and there is no image in background.
                          Now I want to change them with javascript.
                          Why for ?
                          because you want to correct the error ?


                          CSS :
                          =====
                          #show { background: url(images/pict1.jpg) no-repeat top left #ffc; }
                          #show.p_tr { background-position: top right; }
                          #show.p_br { background-position: bottom right; }
                          #show.p_bl { background-position: bottom left; }
                          #show.i_l { background-image: url(images/pict2.jpg) }
                          #show.i_2 { background-image: url(images/pict3.jpg) }
                          #show.i_3 { background-image: url(images/pict4.jpg) }

                          JS :
                          ====
                          function chang(img, pos) {
                          var d = document.getEle mentById('show' );
                          d.className = img+' '+pos;
                          }

                          HTML:
                          =====

                          <div id="show" style="height:6 00px">
                          <p><a href="javascrip t:chang('i_1',' p_tr')">
                          pict #2 top right</a>
                          <p><a href="javascrip t:chang('i_1',' p_br')">
                          pict #2 bottom right</a>
                          <p><a href="javascrip t:chang('i_2',' p_bl')">
                          pict #3 bottom left</a>
                          <p><a href="javascrip t:chang('','')" >
                          original pict and position</a>
                          </div>

                          ======== soluce 2 =============

                          CSS :
                          =====
                          #show { background: url(images/pict1.jpg) no-repeat top left #ffc; }

                          JS :
                          ====
                          function chang(img, pos) {
                          var d = document.getEle mentById('show' ).style;
                          d.backgroundPos ition = pos;
                          d.backgroundIma ge = 'url(images/'+img+'.jpg)';
                          }

                          HTML :
                          ======
                          <div id="show" style="height:6 00px">
                          <p><a href="javascrip t:chang('pict2' ,'top right')">
                          pict #2 top right</a>
                          <p><a href="javascrip t:chang('pict2' ,'bottom right')">
                          pict #2 bottom right</a>
                          <p><a href="javascrip t:chang('pict3' ,'bottom left')">
                          pict #3 bottom left</a>
                          <p><a href="javascrip t:chang('pict1' ,'top left')">
                          original pict and position</a>
                          </div>

                          --
                          sm

                            Comment

                            Previous template Next
                            Working...