0
Welcome Guest! Login
0 items Join Now

.png borders: horz, vert and corners for flush

Last Post
Search Topic

  • .png borders: horz, vert and corners for flush

    Posted 12 years 11 months ago
    • Hello,

      I've managed to add a "picture frame" into a module by adding the code below, into /css/template.css (Momentum template). This is basically an image repeated for each side, with 4 corner pieces that give a flush look. There is lastly an image that is used as a big, centre main background which content appears on.
      This image is hidden for guests.
      Please log in or register to see it.

      ---  load the images. "bg-c...." are corners.  "bg-plaque..." is big background ---
 
.junbg3 .rt-block {background-image: url("../images/bg-c-tleft.png"), url("../images/bg-c-tright.png"), url("../images/bg-c-bleft.png"), url("../images/bg-c-bright.png"), url("../images/bg-line-bottom.png"), url("../images/bg-line-left.png"), url("../images/bg-line-top.png"), url("../images/bg-line-right.png"), url("../images/bg-plaque.png");
 
background-position: top left, top right, bottom left , bottom right, center bottom, center left, center top, center right, center;
 
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, repeat-y, repeat-x, repeat-y, no-repeat;}
      :arrow: I then set the module class as "junbg3"


      While it is working, I know I am doing a few things wrong. I couldn't get the corners to rotate correctly with code so I rotated them in an art application, having 4 images instead of what could have been 1.

      I'm also pretty sure that there is a better way to handle the parameters, which I attempted but couldn't get it working.

      Thought I'd share and hopefully also get someone to point out critical errors.
    #822853

Time to create page: 0.083 seconds