Would that be possible to resize the background-image based on the properties and attributes of the anchor tag?
I have an anchor tag that displays an image:
<a href="#" style="width: 300px; height: 300px; border:开发者_JS百科 1px solid black; background: url(computer.jpg); position: absolute;"></a>
Would that be possible to resize the background-image based on the properties and attributes of the anchor tag? e.g. set the width and height of the background image to 300px.
(Please don't suggest putting an img tag inside the tag as that's not the question...)
Thanks,
Would a background-size work with background-norepeat specified?
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>
I'm not sure it's feasible using css2 without some javascript but as selbie said There is a CSS3 property that do it quite nicely:
-moz-background-size: 100% 100%; /* FF3.6 */
-webkit-background-size: 100% 100%; /* Saf3-4 */
background-size: 100% 100%; /* Opera, IE9, Saf5, Chrome, FF4 */
Another option is to use img tag:
In your HTML:
<img id="background" src="images/computer.jpg" alt="" />
In your CSS:
#background {position:absolute; z-index:1; width:100%; height:100%;}
Update:
Have a look at this article by chris coyer.
精彩评论