logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 11-09-2011, 03:47 PM   #1
gigiloumill
gigiloumill's Avatar
 
Join Date: Apr 2009
Location: Miami, FL
Posts: 493
Default Background image

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
__________________
Keeping your business connected.
www.starionmedia.com

Last edited by gigiloumill; 11-09-2011 at 03:47 PM.. Reason: more
gigiloumill is offline   Reply With Quote
Old 11-09-2011, 03:59 PM   #2
johnMoss
johnMoss's Avatar
 
Join Date: Dec 2010
Location: Dallas
Posts: 867
Default

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.
__________________
LinkedIn: jM
johnMoss is offline   Reply With Quote
Old 11-09-2011, 04:02 PM   #3
gigiloumill
gigiloumill's Avatar
 
Join Date: Apr 2009
Location: Miami, FL
Posts: 493
Default

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
__________________
Keeping your business connected.
www.starionmedia.com
gigiloumill is offline   Reply With Quote
Old 11-09-2011, 04:08 PM   #4
johnMoss
johnMoss's Avatar
 
Join Date: Dec 2010
Location: Dallas
Posts: 867
Default

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?
__________________
LinkedIn: jM
johnMoss is offline   Reply With Quote
Old 11-09-2011, 04:09 PM   #5
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Quote:
Originally Posted by gigiloumill View Post
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-f...kground-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.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 11-09-2011, 04:17 PM   #6
gigiloumill
gigiloumill's Avatar
 
Join Date: Apr 2009
Location: Miami, FL
Posts: 493
Default

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..
__________________
Keeping your business connected.
www.starionmedia.com
gigiloumill is offline   Reply With Quote
Old 11-09-2011, 04:30 PM   #7
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Quote:
Originally Posted by gigiloumill View Post
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.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 11-09-2011, 04:33 PM   #8
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

oh btw... if you want to repeat a mesh image, that image needs to be a seamless pattern.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 11-09-2011, 04:34 PM   #9
johnMoss
johnMoss's Avatar
 
Join Date: Dec 2010
Location: Dallas
Posts: 867
Default

Quote:
Originally Posted by gentleone View Post
Look at the link I posted.
Agreed G, follow what it says...
__________________
LinkedIn: jM
johnMoss is offline   Reply With Quote
Old 11-09-2011, 07:29 PM   #10
gigiloumill
gigiloumill's Avatar
 
Join Date: Apr 2009
Location: Miami, FL
Posts: 493
Default

Thank you very informative..
__________________
Keeping your business connected.
www.starionmedia.com
gigiloumill is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 01:24 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com