September 8th, 2012, 08:39 AM
Image with different left/right colour repeater?
Please can someone help me achieve this simple layout in using CSS. I have a swirly patterned image which on the left side fades out to solid dark pink, and the right side fades out to solid light pink.
I want the image to display horizontally, aligned centrally across the width of the browser window. Now, for when the browser window is wider than the image, I want to display dark pink in the gap between the left edge of the browser window up to the left edge of the image, and similarly, display light pink on the right side of the image.
How can this be achieved?
September 8th, 2012, 03:09 PM
Hi there preludecrazy,
and a warm welcome to these forums.
Check out the attachment to see a basic example, bearing in mind
that I have no idea what your image or the two pinks are.
September 8th, 2012, 06:21 PM
Thanks for the welcome, and thanks for replying! That worked a treat!
Originally Posted by coothead
Pity a huge image is required rather than being able to do something a little more elegant, eg. with a background-color, but at least it works! I just tweaked it to work off a DIV instead of an IMG, in case I need to put some text on top.
September 8th, 2012, 08:18 PM
Ah, looks I've just come up with a solution that doesn't use a huge image, and instead uses a gradient fill instead with two 'stops' in the middle, so filling 0%-50% with the same dark pink, then 51% to 100% with the light pink, so you effectively get a gradient fill with only two colours; then use that to fill the background of the container DIV.
Originally Posted by preludecrazy
Haven't had chance to compare the compatibility of both solutions across different browsers yet though, but it works in IE9, FF15, & Safari 5. So this is what I done... Added this:
...and also added the 'gradient' class to the container DIV.
<!--[if gte IE 9]>
Then modified the container style:
background: #7a0a3c; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(left, #7a0a3c 0%, #7a0a3c 50%, #c07397 51%, #c07397 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#7a0a3c), color-stop(50%,#7a0a3c), color-stop(51%,#c07397), color-stop(100%,#c07397)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #7a0a3c 0%,#7a0a3c 50%,#c07397 51%,#c07397 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #7a0a3c 0%,#7a0a3c 50%,#c07397 51%,#c07397 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #7a0a3c 0%,#7a0a3c 50%,#c07397 51%,#c07397 100%); /* IE10+ */
background: linear-gradient(to right, #7a0a3c 0%,#7a0a3c 50%,#c07397 51%,#c07397 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a0a3c', endColorstr='#c07397',GradientType=1 ); /* IE6-8 */