Skip navigation
Currently Being Moderated

Image into div tag

Apr 10, 2013 4:45 AM

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

 
Replies
  • Currently Being Moderated
    Apr 10, 2013 5:10 AM   in reply to inquestflash

    Have a look at background-size property.

     

    --

    Kenneth Kawamoto

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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 10, 2013 6:41 AM   in reply to inquestflash

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 10, 2013 6:43 AM   in reply to mhollis55

    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/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 10, 2013 6:50 AM   in reply to kennethkawamoto2

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 10, 2013 7:00 AM   in reply to mhollis55

    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/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2013 2:32 AM   in reply to inquestflash

    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/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2013 11:35 AM   in reply to inquestflash

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points