hi,

why repeat function isn't working at one of my image but working at other in same file.

not working :

background: url(images/gradient.jpg) repeat-y

for which working:

background: #ffffff url(images/wrapper.png) repeat-y;

I have noticed that by adding color it works, is it correct? If yes then why?

Well, firstly, the first statement is missing the semi colon ( ; ), unless it is the last item in your class/id etc then it will need it.

You are working with a CSS shorthand technique, you dont always have to define all parts of the shorthand to make it work, example:

Margin shorthand will normally need all parts to function how you want it:

.exampleClass {
      margin: 5px 10px; /* Shorthand (top and bottom, left and right */
      margin: 5px 10px 5px 10px;  /* "long" shorthand (top, right, bottom, left */

      /* Normal */
      margin-top: 5px;
      margin-right: 10px;
      margin-bottom: 5px;
      margin-left: 10px;
}

With your background property, you can use:

.exampleClass {
      background: #fff url(images/image.jpg) no-repeat left top;
      /* or */
      background: #fff;
      /* or */
      background: #fff url(images/image.jpg);
      /* or */
       background: url(images/image.jpg) 100% bottom;
      /* etc etc etc, the list goes on */
}

Read here: http://articles.sitepoint.com/articl...-css-shorthand for more info on CSS shorthand.

well, i have done a mistake there, colon( ; ) is there in original code but still it isn't working. The other function is also a good one but at the moment I need this one.

let's see ALL the code.

Originally Posted by chrishirst

let's see ALL the code.

This would certainly help.

Other obvious causes could be that the image isnt present or that the file name is different to what it should be, i.e. typo in the attual file name etc

Do you have any height/width for section with this bg ? When you set bg img in CSS your section need some measurements if there is no content.

Otherwise show us code as we are blind atm.

here is the link to the page :

Cricpak

here is the full code :

body {
	background: #ffffff url(images/gradient.jpg) repeat-y;
	width: 982px;
	color: #333333;
	font-size: 11px;
	font-family: Arial, Tahoma, Verdana;
	margin: 0px auto 0px;
	padding: 0px;
	}

img location here :

http://www.cricpak.5gigs.net/wp/wp-c...s/gradient.jpg

Strangly, without repeat-y the image is applying correctly. Its only once you put the repeat-y that it decides not to, in fire fox atleast.

If you place this in your body class it works but you have an underlying issue that should be fixed.

background: #ffffff url("images/gradient.jpg") 0 0;

Also, the image has a big grey gradient at the bottom, is this correct? ifso then im not sure white is the background colour your going to want.

oh yeah! i just added coz i thought that the issue is with the color.

what's underlying?

Sorry i really suck at english written skills.

By underlying i mean, there is a problem some where since repeat-y should be working but isnt, so while i have pasted some code that "should" fix your problem you should look into why this problem has occured rather than use my "work around".

Your english is better than 95% of the people on this board Rabbit.

is your image there? When I click the provided link it goes to an error page...

Originally Posted by BDevil15

Your english is better than 95% of the people on this board Rabbit.

is your image there? When I click the provided link it goes to an error page...

Thanks ^^

The image is there on the page, it is not repeating and stuck at the far left side, if you use firebug in firefox you can get the image to repeat however there is an issue that is preventing repeat-y from doing what its soposed to.

Thank You! Phunk Rabbit, it is working well now.

Your welcome.

Are you sure you want repeat-Y? Repeat-y will repeat the image VERTICALLY down the page and that would look a little strange with a gradient. Repeat-X is the HORIZONTAL repeat and will show your gradient only at the top of the page.

Originally Posted by LadynRed

Are you sure you want repeat-Y? Repeat-y will repeat the image VERTICALLY down the page and that would look a little strange with a gradient. Repeat-X is the HORIZONTAL repeat and will show your gradient only at the top of the page.

LOL

Now i feel like a muppet, and thats one of the few thing i normally get right when coding.

Ya know.. I always have to stop and think which direction is x or y..lol. Guess the old high school geometry lessons are getting fuzzy!

Originally Posted by LadynRed

Ya know.. I always have to stop and think which direction is x or y..lol. Guess the old high school geometry lessons are getting fuzzy!

X to the decks, Y to the sky

well, that's one I've never heard before.. Good one to remember!