CODEWITHSUNDEEP
htmlcssbackground
PonyTerrance
PonyTerrance

Reputation: 47

background won't display for div

Currently I am trying to give a class a background image and make it repeat vertically.

Im using the following code for the image:

background: url('http://ponyterrance.co.uk/gmod-loadingscreen/main.png') repeat-y;

I have also tried

background-image: url('http://ponyterrance.co.uk/gmod-loadingscreen/main.png') repeat-y;

But I got nothing from this. The page in question can be seen here: http://ponyterrance.co.uk/gmod-loadingscreen/arkonn.html if you want a better idea of what I mean

Its rather irritating because I used the exact same code on the background of a div on a page I made 4 hours ago. I can't see anything wrong though. I've looked over it for a while now looking for anything being missing but it appears all there. You lot will probably see it straight away but I'm blind as hell.

Also I have tried http linking the file as well as just 'main.png' as its in the same directory.

JSFIDDLE : http://jsfiddle.net/tejashsoni111/U5CLS/

Upvotes: 0

Views: 90

Answers (5)

Amit
Amit

Reputation: 113

try this without height and width,

#main .content {
  background: url('http://ponyterrance.co.uk/gmod-loadingscreen/main.png') repeat-y 0 0;
  overflow:hidden; 
}

Upvotes: 0

Delphin Sam
Delphin Sam

Reputation: 142

Use the below style, it will work

#main .content {
background-image: url("http://ponyterrance.co.uk/gmod-loadingscreen/main.png");
background-position: center center;
background-repeat: repeat;
}

Upvotes: 0

user3218194
user3218194

Reputation: 458

Add background size to the image you are using else reduce the size of the image to the container dimension.

Upvotes: 4

Jakub Wisniewski
Jakub Wisniewski

Reputation: 2249

is the div empty ? if so have you tried putting a non-zero value to width and height?

width: /* != 0 value here */ ;
height: /* != 0 value here */ ;

maybe try moving the repeat as seperatly

background-repeat:repeat-y;

if any more ideas will pop-up into my head i'll update the answer

Upvotes: 0

XIMRX
XIMRX

Reputation: 2170

Your div is small and part of image that covers div is white hence not visible. Use colored image or change size of div to see full image.

Upvotes: 0

Related Questions