Возможно ли изменить размер фонового изображения на основе свойств и атрибутов тега привязки?

Question

У меня есть тег привязки, который отображает изображение:

 <a href="#" style="width: 300px; height: 300px; border: 1px solid black; background: url(computer.jpg); position: absolute;"></a>

Можно ли изменить размер фонового изображения на основе свойств и атрибутов тега привязки? например установите ширину и высоту фонового изображения на 300 пикселей.

(Пожалуйста, не предлагайте помещать тег img внутри тега, так как это не вопрос ...)

Спасибо

Answer 1

Я не уверен, что это возможно, используя css2 без некоторого javascript, но, как сказал selbie, есть свойство CSS3, которое делает это довольно хорошо:

     -moz-background-size: 100% 100%; /* FF3.6 */
  -webkit-background-size: 100% 100%; /* Saf3-4 */
          background-size: 100% 100%; /* Opera, IE9, Saf5, Chrome, FF4 */

Другой вариант - использовать тег img:

В вашем HTML:

<img id="background" src="images/computer.jpg" alt="" />

В вашем CSS:

#background {position:absolute; z-index:1; width:100%; height:100%;}

Обновление:

Посмотрите на эта статья Крис Койер.

Answer 2

Будет ли работать размер фона с заданным background-norepeat?

http://www.w3schools.com/cssref/css3_pr_background-size.asp

<a href="#" style="width: 300px; height: 300px; border: 1px solid black; background: url(computer.jpg); background-size: 300px 300px; background-repeat: no-repeat; position: absolute;"></a>