#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    4
    Rep Power
    0

    Image with different left/right colour repeater?


    Hi.

    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?


    Thanks.
  2. #2
  3. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    251
    Rep Power
    86
    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.

    coothead
    Attached Files
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    4
    Rep Power
    0
    Originally Posted by coothead
    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.

    coothead
    Thanks for the welcome, and thanks for replying! That worked a treat!

    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.

    Cheers.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    4
    Rep Power
    0
    Originally Posted by preludecrazy
    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!
    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.

    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:

    Code:
    <!--[if gte IE 9]>
      <style type="text/css">
        .gradient {
           filter: none;
        }
      </style>
    <![endif]-->
    ...and also added the 'gradient' class to the container DIV.

    Then modified the container style:
    Code:
    .image-container {
    background: #7a0a3c; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdhMGEzYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzdhMGEzYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2MwNzM5NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjMDczOTciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    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 */
    }

IMN logo majestic logo threadwatch logo seochat tools logo