i'm using background images , gradients - see code below. want set percent height image only, works firefox, cannot figure out how work safari - when using code below, in safari, no longer shows background image.
background: #7f7f7f; /* old browsers */ background: url(/images/star.png) no-repeat center center / 70% auto, -moz-linear-gradient(top, #7f7f7f 0%, #5b5b5b 100%); /* ff3.6+ */ background: url(/images/star.png) no-repeat center center / 70% auto, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7f7f7f), color-stop(100%,#5b5b5b)); /* chrome,safari4+ */ background: url(/images/star.png) no-repeat center center / 70% auto, -webkit-linear-gradient(top, #7f7f7f 0%,#5b5b5b 100%); /* chrome10+,safari5.1+ */ background: url(/images/star.png) no-repeat center center / 70% auto, -o-linear-gradient(top, #7f7f7f 0%,#5b5b5b 100%); /* opera 11.10+ */ background: url(/images/star.png) no-repeat center center / 70% auto, -ms-linear-gradient(top, #7f7f7f 0%,#5b5b5b 100%); /* ie10+ */ background: url(/images/star.png) no-repeat center center / 70% auto, linear-gradient(to bottom, #7f7f7f 0%,#5b5b5b 100%); /* w3c */ filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#7f7f7f', endcolorstr='#5b5b5b',gradienttype=0 ); /* ie6-9 */ can spot wrong code?
solved.
the code below give width first element in background, in case image, second sets width second element in background i.e. gradient.
this means can control size of image in background whilst having fluid background using gradient.
background-size: 80% auto, 100% auto; complete code example
background: url(/images/star.png) no-repeat center center, -moz-linear-gradient(top, #7f7f7f 0%, #5b5b5b 100%); /* ff3.6+ */ background-size: 70% auto, 100% auto; 
Comments
Post a Comment