CSS: обернуть изображение вокруг DIV в качестве границы/рамки?

У меня есть DIV с именем «контент», где у меня есть изображение в качестве границы/рамки, которое я хотел бы обойти. У меня обоих есть одна большая цельная рамка (левая, правая, верхняя, нижняя), которая соответствует ширине, которой она должна быть, а также я нарезал ее, чтобы у меня было четыре изображения с одинарной рамкой (left.png, right.png и т. д. ).

Но мне очень трудно прикрепить их к моему div, чтобы все выглядело правильно. Что бы я хотел, если это возможно, так это прикрепить границу (либо изображение с одним кадром, либо четыре нарезанных изображения границы), чтобы они были сбоку от div. Ширина элемента div составляет 800 пикселей, и я хочу оставить его равным 800 пикселей, а затем прикрепить границы за пределами элемента Div.

Возможно ли это, и если да, то как это сделать? Большое Вам спасибо

Искренне
- Местика


image html frame css border
person Emil Devantie Brockdorff    schedule 14.04.2011    source источник
comment
Пожалуйста, предоставьте свой HTML/CSS на данный момент   -  person Gary Green    schedule 14.04.2011

Ответы (2)


arrow_upward
2
arrow_downward

Примерно так: http://jsfiddle.net/easwee/Pa6kR/24/

Это будет работать независимо от того, какую ширину вы установите. Вы должны использовать 8 изображений, чтобы заставить его работать (объединить в спрайтах). Установите ширину и высоту углов, а также фон на все, что вам нужно.

person easwee    schedule 14.04.2011

arrow_upward
0
arrow_downward

Вы можете увидеть, что я пробовал:

CSS:

#content{ 
width:800px;
padding:20px 20px 20px 20px;
margin-bottom: 0px;
margin-top: 30px;
margin-left:160px;
margin-right:auto;
overflow:hidden;
background: #e0e0e0 url("../images/frame.png") no-repeat;

HTML:

<div id="content"> ALL MY CONTENT INSIDE THIS DIV </div>
person Emil Devantie Brockdorff    schedule 14.04.2011