CODEWITHSUNDEEP
css
cipher
cipher

Reputation: 2484

Similar Codes, Different Effect

I am a beginner in designer, I had to develop a small website, where i designed a ui, but i have problems regarding css.

Here's a style i have written 

background-image: url("../images/border_bottom_left.png"), url("../images/border_bottom_right.png"), url("../images/border_top_left.png"), url("../images/border_top_right.png");
background-position: bottom left, bottom right, top left, top right;
background-color:grey;
background-repeat: no-repeat;

which inserts four images to four corners and fills all the other part with a grey background

Now, instead of grey, i wanted to insert an image, So i replaced background-color with background-image: url("../images/bg_content.png") but it does not help me. I tried to use the bg_content.png in the first background-image and write its corresponding position to center, it didn't work?

Can anyone of you please help me!

Upvotes: 1

Views: 61

Answers (5)

James Montagne
James Montagne

Reputation: 78650

Simply add the image to your background-image and your background-position, then expand your background-repeat:

background-image: url("../images/border_bottom_left.png"), url("../images/border_bottom_right.png"), url("../images/border_top_left.png"), url("../images/border_top_right.png"), url("../images/bg_content.png");
background-position: bottom left, bottom right, top left, top right, top left;
background-color:grey;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;

http://jsfiddle.net/5k8eg/2/

Upvotes: 4

İsmet Alkan
İsmet Alkan

Reputation: 5447

As long as I know background-color doesn't accept image files. Try background-color:#4B4C4D instead. For picking up HTML colors you can use this online color picker.

EDIT: place a div inside another div and give those divs different background-image values. One div can have only one background image.

However in CSS3 you can have more than one background images. Visit this link for that purpose.

Upvotes: 0

decden
decden

Reputation: 719

This is probably because your background image doesn't get repeated (as do the corner images) therefore, it will get covered up by one of the corner pictures. Try to set the first background-image to repeat:

background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;

Upvotes: 1

Kaloyan
Kaloyan

Reputation: 7352

Are you sure you specified center for X and Y of the 5th image ?

background-position: bottom left, bottom right, top left, top right, center center;

http://jsfiddle.net/YhZ8e/

Upvotes: 0

dezman
dezman

Reputation: 19358

background-color cannot specify a url, only a color. You will need to use more than one div (or whatever element you are using) to do what you are trying to do.

Upvotes: 1

Related Questions