11 Replies Latest reply on Mar 5, 2014 8:31 AM by Nancy OShea

    Putting image as background

    Lotny123 Level 1

      Hello,

       

      I'm doing this ****** website as a school project and we are using Dreamweaver 8.

      My problem is that ideally, I would like my website to have an image as a background and on top of that my logo, buttons, text, other photos, etc.

      Is there any way to do that? We were taught to work in Layout Mode and drawing Layout Tables and then Layout Cells inside of that. The problem is that once I put my background image inside a Layout Cell, I can't put another image or a piece of text on top of that (can't draw another Layout Cell withing an existing Layout Cell).

       

      Is there a way to do that? When I use tool called Draw Layer and draw a Layer Box on top of everything and then put my text in there, it works fine but that Layer Box goes all over the place in the actual web browser when I load the view (F12). Each time I move it, it moves somewhere else, so it's a bit pointless.

       

      I really need help with this, does anyone have any ideas?:(

        • 1. Re: Putting image as background
          MurraySummers Level 8

          Is there any way to do that? We were taught to work in Layout Mode and drawing Layout Tables and then Layout Cells inside of that.

           

          Good grief. Not only is this information hopelessly out of date, it's just the wrong way to build a page. But I understand that you just want to satisfy the assignment and will perhaps have plenty of time to learn the techniques later.

           

          Getting a background image to site behind your content is pretty simple.

           

          In code view, with your working page open in DW8, change this -

           

          </head>

           

          to this -

           

          <style type="text/css">

          body {

               background-image:url(path_to_your_image);

          }

          </style>

          </head>

           

          That should do what you have asked. It makes the image the background of the entire page. It will be aligned with the left and top of the browser viewport, and will be shown beneath all other content on your page.

          1 person found this helpful
          • 2. Re: Putting image as background
            MurraySummers Level 8

            Let me also say that the school and this instructor should be ashamed for teaching such sub-optimal and antique methods for building pages of HTML. Dreamweaver 8 was released in 2005 and was the last Macromedia build of Dreamweaver due to Macromedia's acquisition by Adobe. Although Adobe doesn't use that numeric designation any more, the current version is DW 13. Layout mode was removed from DW CS4 (or DW 10) in 2008, if I remember correctly. It was removed because a) it wrote invalid code, and b) it was ineffective in producing practical and stable layouts when placed on the web.

             

            Just sayin....

            • 3. Re: Putting image as background
              Lotny123 Level 1

              Yes I do realise that! They taught us Adobe Flash 8 last! But all I want now is to get good grades and get on a good course in university.

               

              Anyway, I used your code but the background is repeated. like the image fits in 2 times instead of being centred with black spaces both to the left and right. Any way to do that?

               

              thanks a lot!!

              • 4. Re: Putting image as background
                MurraySummers Level 8

                Oh, sorry! Try this instead of the body rule that I sent -

                 

                body {

                     background-image:url(path_to_image);

                     background repeat:no-repeat;

                     background-position:center top;

                }

                • 5. Re: Putting image as background
                  Lotny123 Level 1

                  Not sure if you realise but you're saving me SO MUCH trouble and stressing over my stupid A levels!! You're a saint!

                   

                  If I have any further problems (and I hope not) do you think I could count for your help again?

                   

                  Thanks A LOT, again!!

                  • 6. Re: Putting image as background
                    MurraySummers Level 8

                    Just post back here - there are lots of expert helpers.

                    • 7. Re: Putting image as background
                      Lotny123 Level 1

                      does anybody know of a way to put a simple scrolling gallery with an HTML code? I tried to find something online but I couldn't work it.

                       

                      I'd like something like a filmstrip of my photos and then one of them enlarges as you hover over it? or maybe even a filmstrip of bigger images that scroll to the left continuously.

                       

                      I'd appreciate any help, thanks!

                      • 8. Re: Putting image as background
                        MurraySummers Level 8

                        There is no way to do this in HTML alone. You will need some JavaScript to accomplish that task. Google "scrolling gallery javascript" and see what you find.

                        • 9. Re: Putting image as background
                          Nancy OShea Adobe Community Professional & MVP

                          You could use jQuery Cycle2 with the Carousel option & combine it with jQuery Fancybox2 Viewer.  Copy & paste the following code into a new, blank document.  SaveAs test.html.  Replace thumbnail and full size images with your own.

                           

                           

                          <!doctype html>
                          <html lang="en">
                          <head>
                          <meta charset="utf-8">
                          <title>HTML5, Cycle2 Carousel with Fancybox</title>
                          
                          <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
                          
                          <!--Latest jQuery Core Library-->
                          <script src="http://code.jquery.com/jquery-latest.min.js">
                          </script>
                          
                          <!--FANCYBOX plugin-->
                          <link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" media="screen">
                          <script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>
                          
                          <!--Cycle2 Plugin-->
                          <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
                          
                          <!--Cycle2 Carousel-->
                          <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.carousel.min.js"></script>
                          
                          <style>
                          * {
                          -webkit-box-sizing: border-box;
                          -moz-box-sizing: border-box;
                              box-sizing: border-box;
                          }
                          aside {
                              float: left;
                              width: 25%;
                              border-right: 1px solid #666;
                              padding: 2%;
                          }
                          section {
                              float: left;
                              width: 75%;
                              padding: 2%;
                          }
                          .slideshow img { border: 4px solid #999; }
                          
                          /* slideshow pager */
                          .cycle-pager {
                              text-align: center;
                              width: 100%;
                              z-index: 500;
                              position: relative;
                              top: 0;
                          }
                          .cycle-pager span {
                              font-family: arial;
                              font-size: 75px;
                              width: 22px;
                              height: 22px;
                              display: inline-block;
                              color: #ddd;
                              cursor: pointer;
                          }
                          .cycle-pager span.cycle-pager-active { color: #09C; }
                          .cycle-pager > * { cursor: pointer; }
                          </style>
                          </head>
                          
                          <body>
                          <header> <h1><a href="http://www.malsup.com/jquery/cycle2/">jQuery Cycle 2</a> Responsive Carousel Slider with <a href="http://fancyapps.com/fancybox/">Fancybox2</a> Viewer</h1>
                          </header>
                          
                          <aside> 
                          <h2>Left Aside</h2>
                          <h3>Heading 3</h3>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                          Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. 
                          Aenean tristique enim ut ante dignissim.</p>
                          </aside>
                          
                          <section> 
                          
                          <!--begin slideshow--> 
                          <div class="slideshow"
                          data-cycle-pause-on-hover="true"
                          data-cycle-fx="carousel"
                          data-cycle-timeout="2000"
                          data-cycle-pager="#pager"
                          data-cycle-carousel-visible="5"
                          data-cycle-carousel-fluid="true"
                          data-cycle-slides="> a"
                          > 
                          <!--insert thumbnails and links to full size images below--> 
                          <a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/600x400.jpg" title="optional captions"><img src="http://placehold.it/160x107.jpg" alt="Thumbnail 1" /></a> 
                          
                          <a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/600x400.jpg" title="optional captions"><img src="http://placehold.it/160x107.jpg" alt="Thumbnail 2" /></a> 
                          
                          <a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/600x400.jpg" title="optional captions"><img src="http://placehold.it/160x107.jpg" alt="Thumbnail 3" /></a> 
                          
                          <a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/600x400.jpg" title="optional captions"><img src="http://placehold.it/160x107.jpg" alt="Thumbnail 4" /></a> 
                          
                          <a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/600x400.jpg" title="optional captions"><img src="http://placehold.it/160x107.jpg" alt="Thumbnail 5" /></a> 
                          
                          <a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/600x400.jpg" title="optional captions"><img src="http://placehold.it/160x107.jpg" alt="Thumbnail 6" /></a> 
                          
                          <a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/600x400.jpg" title="optional captions"><img src="http://placehold.it/160x107.jpg" alt="Thumbnail 7" /></a> 
                          <!--end slideshow--> 
                          </div>
                          
                          <!--begin Cycle2 pager--> 
                          <div class="cycle-pager" id="pager"> 
                          <!--end pager--> 
                          </div>
                          </section>
                          
                          <!--Cycle2 function code--> 
                          <script>$.fn.cycle.defaults.autoSelector = '.slideshow';</script> 
                          <!--FancyBox function code--> 
                          <script>
                                  $(document).ready(function() {
                                      $('.fancybox').fancybox();
                                  });
                              </script>
                          </body>
                          </html>
                          

                           

                           

                          Nancy O.

                          • 10. Re: Putting image as background
                            Lotny123 Level 1

                            thanks very much! that's basically what I was looking for. what do I need to delete from that code to remove the big fat dots below the photos? I would like to keep the scrolling but without the dots if that's possible.

                            • 11. Re: Putting image as background
                              Nancy OShea Adobe Community Professional & MVP

                              Simply remove the cycle-pager and #pager from your CSS and HTML code.

                               

                               

                              Nancy O.