Put image in background (css)

Hi, i need some help...i read other posts but as i dont know about css i want to make sure it works. Heres the code and i wanted to know where to put the img url. Its a small square and want it to be repeated all over the background.

body {
    background: #ececec;
	font-family: Verdana, Tahoma, Arial, sans-serif;
	font-size: 8pt;
}
/*added*/
#container {
   position: relative; 
	 margin: 0 auto; 
	 width: 707px; 
	 text-align: left;  
}
	 

Code (markup):

Thanks, fuser

 

Wait i think i know this,
try this
Change
background: #ececec;

TO:
background: #ececed; url(yourlink.com/MYIMAGE.JPG);

This will repeat itself automatically,
Hope this works for you

 

Thanks!...ill try it and let you know

thanks, fuser

 

Hello furion,

Putting a background image using css is easy and complex at the same time. I'll get you go through the basics.

You can use the following code to insert a background image,

Code (markup):

Body {  background: url(imagefolder/image.jpg) }

Code (markup):

Or

body {  background-image: url(image/image.jpg) }

Code (markup):

To have an image appear appear statically, i.e just once! You can use,

body {  background-image: url(image/image.jpg) [B]no-repeat[/B]}

Code (markup):

To have it repeat itself hoirzontally, you can use,

body {  background-image: url(image/image.jpg) [B]repeat-x[/B]}

Code (markup):

To have it repeat itself vertically, used mostly as page background or sidebar background, you can use

body {  background-image: url(image/image.jpg) [B]repeat-y[/B]}

Code (markup):

There is a lot more about backgrounds, let me know if you're interested in learning!

Abhishek

 

Explain is satisfactory

 

I didn't quite get, what you meant when you said! "Explain is Satisfactory"

Beg your pardon

 

Using CSS you can do amazing things with images. Along with the information above you can also use it to position images wherever you like. If you are feeling really creative you can have a background in your body tag and also use images as backgrounds in your table and other tags, including form tags! Play around and have some fun! When it comes to learning specifics on .CSS http://www.w3schools.com/ is an EXCELLENT source of information.

Best of luck!

 

i agree with design1.... there are some VERY kool ways to minipulate images using .css

test, check, test, check lol

 

body {
    background: url('/image.jpg') #ececec;
	font-family: Verdana, Tahoma, Arial, sans-serif;
	font-size: 8pt;
}
/*added*/
#container {
   position: relative; 
	 margin: 0 auto; 
	 width: 707px; 
	 text-align: left;  
}
	 

Code (markup):

Hope it helps

 

I found http://css.maxdesign.com.au/listutorial/introduction.htm to be very good with learning images.

In the beginning it explains about lists, but if you go a few steps into the tutorial it goes into image lists while explaining step by step what the various background image properties do.

 

I think you should use style="background repeat:x-repeat" in that <td> so it repeats in x-direction of taht <td>....

 

Basically just change it from

body {
    background: #ececec;
	font-family: Verdana, Tahoma, Arial, sans-serif;
	font-size: 8pt;
}
/*added*/
#container {
   position: relative; 
	 margin: 0 auto; 
	 width: 707px; 
	 text-align: left;  
}

Code (markup):

to

body {
    background: url(IMAGE URL HERE);
	font-family: Verdana, Tahoma, Arial, sans-serif;
	font-size: 8pt;
}
/*added*/
#container {
   position: relative; 
	 margin: 0 auto; 
	 width: 707px; 
	 text-align: left;  
}

Code (markup):

 

Hi!

I know this thread is quite "old" but some things need to be clarified..

According to w3c consortium standards - there are 6 possible background properties:

• background-color:
• background-image:
• background-position:
• background-repeat:
• background-attachment:
• background:

background-color: - sets the background color of an element Pretty obvious, right?
Values: color, transparent or inherit

background-image: - sets the background image of an element
Values: URL, none

background-position: - specifies the background-image's initial position.
Values: percentage, length, dictionary word
Details: please see the description at W3C CSS 2.1 Specification - can't explain it easier

background-repeat: - specifies whether the background-image is repeated (tiled), and how.
Values: repeat, repeat-x, repeat-y, no-repeat, inherit

• repeat means that the background-image is repeated both horizontally and
  vertically.
• repeat-x means that the background-image is repeated horizontally only.
• repeat-y means that the background-image is repeated only.
• no-repeat means that the background-image is not repeated: only one copy of the image is drawn.

background-attachment: - specifies whether the background-image is fixed or scrolls along with the containing block.
Values: scroll, fixed, inherit

Dictionary:
color = rgb(rrr, ggg, bbb); OR rgb(rr%, gg%, bb%); OR #rrggbb; OR #rgb;
inherit = the property takes the same computed value as the property for the element's parent.
URL = url("image.png")

background: - it is just a shorthand property for setting all the individual properties mentioned above, at the same place in the style sheet.
Value: background-color background-image background-position background-repeat background-attachment
IF any of those values is not specified - they're set to their initial values.
Although order of those values is not specified - I'd strongly recommend sticking to one mentioned above..

Therefore:

are valid examples, but:

are incorrect and should NEVER be mentioned (especially as an example!)

So, either use

body { background: rgb([color=#FF0000]rrr[/color], [color=#00FF00]ggg[/color], [color=#0000FF]bbb[/color]) url("imagefolder/image.jpg") 0 0 repeat fixed; }

Code (markup):

or

body { 
 background-color: rgb([color=#FF0000]rrr[/color], [color=#00FF00]ggg[/color], [color=#0000FF]bbb[/color]);
 background-image: url("imagefolder/image.jpg");
 background-position: 0 0;
 background-repeat: repeat;
 background-attachment: fixed;
}

Code (markup):

Kindly regards,
L.

 

Do you want the image to get repeated..?

 

background: #colorcode; url("imageparentdirectory/yourimageendingin.jpg");