12 Replies Latest reply on Sep 5, 2007 9:18 AM by Magnum Magnetics

    setting the content background

    davidkp
      hello fellow webdesigners! i have been getting my hands dirty with webdesigning for the past 3 months which means i am fairly newto this! i love using adobe dreamweaver and fireworks (still trying to learn flash! )

      any way here is what i need help with; a lot of websites have centered boxes with their content inside them like this one :
      http://www.melekvilla.co.uk/
      or this one
      http://www.trim-star.co.uk/

      i want to have my background in on of these boxes. so what i am currently doing is wrapping a div around my text and then centering it but what i want is that it stays in one of these long boxes. i know these boxes are made of repeated background lines so they fit to the length of the content.

      how do i center this background? so that my text will be centerd on top of the centered box therefor being centered perfectly on any size of screen...

      and how do i insert the bottom background (the rounded bit at the bottom of the content) on the same page?

      or is there a better way to do it?

      thanks everyone!

      dave
        • 1. Re: setting the content background
          Magnum Magnetics Level 1
          <div style="width: 750px; margin: auto; background-image: blah.jpg; background-repeat: repeat-y;">
          blah blah blah
          </div>

          Then you make your background image 750px wide however tall you wish and it will repeat it up and down the page indefinitely.

          If you want to have a static background that is, say 750px wide by 600px tall and all content stays in it:

          <div style="width: 750px; height: 600px; margin: auto; background-image: blah.jpg; overflow: hidden;">
          blah blah blah
          </div>

          Then, make your background image 750x600 with exactly what you want in it.

          If you want padding from the edge of the image, you use:

          <div style="width: 750px; height: 600px; margin: auto; background-image: blah.jpg; overflow: hidden;">
          <div style="padding: 5px;">blah blah blah</div>
          </div>

          • 2. Re: setting the content background
            davidkp Level 1
            hi thanks for that, i tried it and it has put margins on both sides of my div and resized the div to the size i wanted it and centered it! but it wont display the pic i want....

            do you know why this is? can anyone help me? :)
            • 3. Re: setting the content background
              Level 7
              Check your syntax -

              style="width: 750px; margin: auto; background-image: url(blah.jpg);

              > If you want to have a static background that is, say 750px wide by 600px
              > tall
              > and all content stays in it:

              This is a poor suggestion - what happens if someone resized their text?

              --
              Murray --- ICQ 71997575
              Adobe Community Expert
              (If you *MUST* email me, don't LAUGH when you do so!)
              ==================
              http://www.dreamweavermx-templates.com - Template Triage!
              http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
              http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
              ==================


              "leeoffy" <webforumsuser@macromedia.com> wrote in message
              news:fb7b5e$r0c$1@forums.macromedia.com...
              > <div style="width: 750px; margin: auto; background-image: blah.jpg;
              > background-repeat: repeat-y;">
              > blah blah blah
              > </div>
              >
              > Then you make your background image 750px wide however tall you wish and
              > it
              > will repeat it up and down the page indefinitely.
              >
              > If you want to have a static background that is, say 750px wide by 600px
              > tall
              > and all content stays in it:
              >
              > <div style="width: 750px; height: 600px; margin: auto; background-image:
              > blah.jpg; overflow: hidden;">
              > blah blah blah
              > </div>
              >
              > Then, make your background image 750x600 with exactly what you want in it.
              >
              > If you want padding from the edge of the image, you use:
              >
              > <div style="width: 750px; height: 600px; margin: auto; background-image:
              > blah.jpg; overflow: hidden;">
              > <div style="padding: 5px;">blah blah blah</div>
              > </div>
              >
              >
              >


              • 4. Re: setting the content background
                Magnum Magnetics Level 1
                I'd say you change "overflow: hidden" to "overflow: scroll" if you are concerned about that and you want a static height. Why didn't you just provide the solution?

                davidkp, to have the rounded parts at the top and bottom and have a variable height, make three images:

                topback.jpg = the top rounded part of your background
                contentback.jpg = the background of your box (sliced with as thin of a height as you can make it)
                bottomback.jpg = the bottom rounded part of your background

                <div style="width: 750px; margin: auto; background-image: url(topback.jpg);"></div>
                <div style="width: 750px; margin: auto; background-image: url(contentback.jpg); background-repeat: repeat-y;">blah blah content</div>
                <div style="width: 750px; margin: auto; background-image: url(bottomback.jpg);"></div>
                • 5. Re: setting the content background
                  davidkp Level 1
                  thanks for the advice guys... i am have made the three pics and will try your methods in a couple of minutes... but as Murray says: what if some one were to change the size of their texte? what would be the best way of making a page like this: http://www.glassesdelivered.co.uk/

                  and another thing: i can't seem to get my pictures to 'stick' to the very top of my page (eg: http://www.trim-star.co.uk/ )

                  i'm sorry to ask these sort of questions! i really love making websites etc and its becoming a hobby! its just that i am self tought and am pretty crap... :)

                  thats why i call on all you 'pros' to help me out! :)

                  thanks for your help and please tell me what the best solution to making the website i am working on would be ....

                  cheers

                  dave
                  • 6. Re: setting the content background
                    offy
                    The last method that I showed would do just fine with anyone changing the text size, because there is no height limit and your background is repeated from top to bottom in the center section.

                    If you would like further assistance, it would be much easier if you provide a link to the page you are working on.
                    • 7. Re: setting the content background
                      davidkp Level 1
                      yes it works fantastic thank you! i have actually got the backgrounds for the content working! great advice thanks! but i do still have a problem: when i preview the page in firefox, there are spaces in between the divs; there is a space between my header image and my content; and a spae between my content and my bottom image background...

                      i would love to be able to send you the link to this but i am currently making the site locally, i'm just waiting for money to go into my account so that i can buy my domain and take a free server to post my site in progress.

                      until then i will give you my code and you can tell me what i am doing wrong ( i have done a cleanup xhtml but that did not do anything...)



                      <body bgcolor="#DEDDDB">
                      <div style="width: 800px; margin: auto; background-image: url(images/topback.png);"> </div>
                      <div style="width: 800px; margin: auto; background-image: url(images/contentback.png); background-repeat: repeat-y;">
                      <p> </p>
                      <p> </p>
                      <p> </p>
                      <p> </p>
                      <p> </p>
                      <p> </p>
                      <p> </p>
                      <p> </p>
                      <p> </p>
                      </div>
                      <div style="width: 800px; margin: auto; background-image: url(images/bottomback.png);"> </div>

                      </div>
                      </body>
                      </html>
                      • 8. Re: setting the content background
                        davidkp Level 1
                        OF FOR SOME REASON THE GAPS HAVE DECIDED TO DISAPEAR! which is great news!

                        i still need experts help though! whilst working in the context that i am working in at the moment (divs with background images) i would like to know how to write alongs ide pictures like in this: http://www.trim-star.co.uk/leather.php

                        and i would really appreciate if some one told me how to align my text to the left like in the following picture without making pads, unless i can make pads for both left and right but not the bottom....

                        thanks for your help guys!
                        • 9. Re: setting the content background
                          davidkp Level 1
                          ok so i have uploaded what i have done up till now to www.dabk.co.uk

                          go check it out and please help me out on my previous questions!
                          • 10. Re: setting the content background
                            Magnum Magnetics Level 1
                            To show text wrapping around an image, try the following code:

                            <img style="float: left; margin-right: 20px; margin-bottom: 20px;" src="testpicture.jpg" />
                            This text should be to the right of the image, and wrap around the bottom of the image with a margin of 20 pixels on the right and bottom. You can change add a margin-left, if you want it to be held off the left side of the box.
                            <div style="clear: both;"></div>

                            Put testpicture.jpg in the same path. The image should be floated to the left side, and keep text 20 pixels from the right and bottom (note the bottom maybe larger, depending on the text size). The last <div> is to clear the float and make sure that bottom of your page will always be moved down below your picture and not appear to the right.

                            As far as the spaces above/below header/footer divs in the sample I provided, try removing the   from the div and set the height in the style of the div to the height of the background image you are using.
                            • 11. Re: setting the content background
                              davidkp Level 1
                              thanks for that great advice leeoffy ! its working beutifully. do you know how i can get a picture 'stuck' to the top of my browser? i have tried with divs but it leaves a 'gap' between the very top of the page and the content. heres an example of what i am trying to do: http://www.desktoptraining.co.uk/

                              cheers

                              dave
                              • 12. Re: setting the content background
                                Magnum Magnetics Level 1
                                Try editing the <body> tag...

                                <body style="border: 0px; margin: 0px; padding: 0px;">

                                I'm assuming that you just don't want a space at the top of the page.