PDA

View Full Version : Background image


gigiloumill
11-09-2011, 02:47 PM
guys, can someone please show me how to ad a small image to a div set at 100% width and have the image spread across. I have a small image of 35 x 35 but I only get that little image to show. I set the css to repeat but then, it shows the same image multiple times. I need to show one smooth image. Thanks

johnMoss
11-09-2011, 02:59 PM
Not gonna happen. Images are absolute in dimension, either from an inline declaration or else their default size. One stunt you can pull though is declare a background color and a background image. The color will fill areas not covered with the image.

gigiloumill
11-09-2011, 03:02 PM
Thanks John, the image is actually a mesh image that I would like to use as a background...it's some what like a honey comb. So what you're saying is that i need a long image? how wide would you suggest to show across?. Thanks, again

johnMoss
11-09-2011, 03:08 PM
Well let's back up, I heard you say 100% , so expandable. If it's a mesh image, does it not line up already at the edges, so that you can utilize repeat?

gentleone
11-09-2011, 03:09 PM
guys, can someone please show me how to ad a small image to a div set at 100% width and have the image spread across. I have a small image of 35 x 35 but I only get that little image to show. I set the css to repeat but then, it shows the same image multiple times. I need to show one smooth image. Thanks

There are several techniques do this. Here's an article which shows them all. The examples are based on filling the background of the body, but they can be applied to a div of any size as well.
http://css-tricks.com/3458-perfect-full-page-background-image/

But if you do use one these techniques, your image must be in pixels as wide and high as possible. Stretching a 35 x 35 px image, won't show a smooth image when it's resized.

gigiloumill
11-09-2011, 03:17 PM
I've used repeat but al it does is show the same image over and over. In other words, I get a line in between images..

gentleone
11-09-2011, 03:30 PM
I've used repeat but al it does is show the same image over and over.
Yes, that's what 'repeat' means doesn't it.
You need to stretch the image so that it fills the 100% width of the div, but keeps its aspect ratio. Look at the link I've gave posted.

gentleone
11-09-2011, 03:33 PM
oh btw... if you want to repeat a mesh image, that image needs to be a seamless pattern.

johnMoss
11-09-2011, 03:34 PM
Look at the link I posted.

Agreed G, follow what it says...

gigiloumill
11-09-2011, 06:29 PM
Thank you very informative..