9 Replies Latest reply: Apr 11, 2013 11:35 AM by Nancy O. RSS

    Image into div tag

    inquestflash Community Member

      Hello Dreamweavers.

       

      Im placing an image into my div tag,and trying to style the it with css,just to see what CSS does really cos Im new.

      Im adding the background image onto the center, but its not occupying all the div tag,its leaving some grey areas

      on the left and right,so how can I place an image to occupy all the div tag?

       

      thank you.

       

      u2a.jpg

        • 1. Re: Image into div tag
          kennethkawamoto2 Community Member

          Have a look at background-size property.

           

          --

          Kenneth Kawamoto

          http://www.materiaprima.co.uk/

          • 2. Re: Image into div tag
            mhollis55 Community Member

            I disagree with what Kenneth has recommended. He is using Flash to re-size a background to the size of the viewport.

             

            Here are a few pointers:

             

            If you use a background-image: url("../images/background.jpg"); in your CSS, the div will not expand to have the background fill the div. Thus, if you have an image you want to show within a div (and don't want other images and text to sit on top of it, the best way to do that is to not set the image as a background.

             

            If you do want the image to be the background and you want the div to be the same size as the image file, you need to determine the dimensions of the image and then make the height and width in your div equal to that.

             

            The other way is to have your CSS resize your background to fill a div with a pre-defined size. So you do the following:

             

            #mydiv {

                 width: 860px;

                 height: 700px;

                 background-image: url("../images/background.jpg");

                 background-size: 100% 100%;

            }

             

            This will pre-define the size of your div and make your background image fill that div. If your background is close to the same size of the div, it will look fine, but if you're stretching a background that is a lot smaller than your div, you may see some graininess. In that case, using Photoshop to defocus that background might be a good idea.

            • 3. Re: Image into div tag
              kennethkawamoto2 Community Member

              Huh? I've never said to use Flash. This is what I said:

              Have a look at background-size property.

              --

              Kenneth Kawamoto

              http://www.materiaprima.co.uk/

              • 4. Re: Image into div tag
                mhollis55 Community Member

                I looked at your link, which uses Flash. That lead me to believe you were suggesting a flash method, which will allow you to re-size a background.

                • 5. Re: Image into div tag
                  kennethkawamoto2 Community Member

                  background-size is a CSS property,  nothing to do with Flash. I am professional in both HTML and Flash (among pother things) and my site is mainly (although this is still in the process - I don't have time for my own site much)  built in both technologies, i.e. if the browser doesn't have Flash, HTML kicks in offering near-identical experience.

                   

                  --

                  Kenneth Kawamoto

                  http://www.materiaprima.co.uk/

                  • 6. Re: Image into div tag
                    inquestflash Community Member

                    Hello

                     

                    would another solution be the scale the image in ps and then place it again into the div tag?

                    • 7. Re: Image into div tag
                      inquestflash Community Member

                      Also I did smthing  a novice user would do,so pls correct me here.

                       

                      I draged the image into the div tag,and strecthed it to fit the div,and then made the div tag the same width as the image:

                       

                      <div id="banner">

                        <div align="center"><img src="Images/night_scene.jpg" width="1081" height="202"></div>

                       

                      so when i saw it int he browser it looked perfect, but is it  good way to go on about?

                       

                      also I used this methos to center the div setting the right and left margin to: auto

                       

                      u2a-5.jpg

                      • 8. Re: Image into div tag
                        kennethkawamoto2 Community Member

                        You can place <img> like that, unless it's intended to be a background image (if so use CSS background property).

                        also I used this methos to center the div setting the right and left margin to: auto

                        align="center" isn't a valid HTML5 attribute (deplicated in HTML4.01). Always use CSS margin instead.

                         

                        --

                        Kenneth Kawamoto

                        http://www.materiaprima.co.uk/

                        • 9. Re: Image into div tag
                          Nancy O. CommunityMVP

                          Best to scale, crop and optimize images to the desired width & height in your graphics editor before you insert them into your web pages.  Otherwise, you may notice unwanted distortion and pixilation.

                           

                           

                          Nancy O.