CODEWITHSUNDEEP
cssbackgroundwebkitgradient
Nikki Mather
Nikki Mather

Reputation: 1148

Background images and gradients - control size of the image

I'm using background images and gradients - see code below. I want to set a percent height for the image only, which works for Firefox, however i cannot figure out how to get it to work for Safari - when using the code below, in Safari, it simply no longer shows the 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 anyone spot something wrong with the code?

Upvotes: 0

Views: 863

Answers (1)

Nikki Mather
Nikki Mather

Reputation: 1148

Solved.

The code below will give a width for the first element in the background, in this case an image, then the second sets the width for the second element in the background i.e. the gradient.

This means i can control the size of an image in a background whilst also having a fluid background using a 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;

Upvotes: 1

Related Questions