0
Welcome Guest! Login
0 items Join Now

Add Side Images for Border

Last Post
Search Topic
    • Brook Hurd's Avatar
    • Brook Hurd
    • Rocketeer
    • Posts: 50
    • Thanks: 0
    • Live Long and Prospe

    Add Side Images for Border

    Posted 13 years 1 month ago
    • I am trying to get some side images on the base Gantry Template to line up.

      I got them to show up using the following codes:

      .bl {
      background-image: url(../images/carrottopbackgroundLeft.png);
      background-repeat: repeat-y;
      background-position: -120px top;
      background-attachment: fixed;
      }
      .br {
      background-image: url(../images/carrottopbackgroundRight.png);
      background-repeat: repeat-y;
      background-position: 112% top;
      background-attachment: fixed;
      }

      But I am having a problem. I set the Template size to 80% so it would resize depending on the screen size. Unfortunately, the images on the sides do not move with the resizing.

      Any suggestions on how to make this work?

      Example site: http://ct.bitslv.com/
    • Brook Hurd
      Binary I.T. Solutions, Inc.
      www.binaryitsolutions.com
      This email address is being protected from spambots. You need JavaScript enabled to view it.
      (702) 233-2487
    #792253
    • Carl V's Avatar
    • Carl V
    • Sr. Rocketeer
    • Posts: 148
    • Thanks: 1
    • Real Estate Investor

    Re: Add Side Images for Border

    Posted 13 years 1 month ago
    • If I were doing this, I would would use the image as a border...

      Now, granted I'm no pro but this would seem a heck of a lot easier.

      http://www.w3schools.com/cssref/css3_pr_border-image.asp

      I don't think it will work in IE but what else is new. If you're going to try this remember to give your border a with if you just assign the border and no width you won't see the image. Here's the code I used, it's no where near perfect but it gives you the idea.

      Style2.css line:11
      .rt-container {
background: #FFFF01;
-moz-border-image: url(../images/carrottopbackgroundRight.png) 30 30 round;
-webkit-border-image: url(../images/carrottopbackgroundRight.png) 30 30 round;
-o-border-image: url(../images/carrottopbackgroundRight.png) 30 30 round;
border-image: url(../images/carrottopbackgroundRight.png) 30 30 round;
border-width: 10px;
}
    #792280
    • Carl V's Avatar
    • Carl V
    • Sr. Rocketeer
    • Posts: 148
    • Thanks: 1
    • Real Estate Investor

    Re: Add Side Images for Border

    Posted 13 years 1 month ago
    • [Delete]
    • Last Edit: 13 years 1 month ago by Carl V.
    #792282
    • Brook Hurd's Avatar
    • Brook Hurd
    • Rocketeer
    • Posts: 50
    • Thanks: 0
    • Live Long and Prospe

    Re: Add Side Images for Border

    Posted 13 years 1 month ago
    • I tried this code as well, no luck. I only want to create a Side Bard that hugs the sides of the entire site. "carrottopbackgroundLeft.png" on Left and "carrottopbackgroundRight.png" on right. Rtcontainer is used multiple times so I created a few divs that wrapped the entire code and included it in the index.php file. The following classes where added. "bl, br, tl, tr" I could get close by manipulating these, but I cannot get it to wrap properly.

      current css:

      .bl {
      background-image: url(../images/carrottopbackgroundLeft.png);
      background-repeat: repeat-y;
      background-position: -120px top;

      }
      .br {
      background-image: url(../images/carrottopbackgroundRight.png);
      background-repeat: repeat-y;
      background-position: 112% top;

      }
    • Brook Hurd
      Binary I.T. Solutions, Inc.
      www.binaryitsolutions.com
      This email address is being protected from spambots. You need JavaScript enabled to view it.
      (702) 233-2487
    #792299
    • Carl V's Avatar
    • Carl V
    • Sr. Rocketeer
    • Posts: 148
    • Thanks: 1
    • Real Estate Investor

    Re: Add Side Images for Border

    Posted 13 years 1 month ago
    • I think you need to add position:fixed to the two classes. That'll lock the images in place regardless of the width of the browser
    #792300
    • Brook Hurd's Avatar
    • Brook Hurd
    • Rocketeer
    • Posts: 50
    • Thanks: 0
    • Live Long and Prospe

    Re: Add Side Images for Border

    Posted 13 years 1 month ago
    • I really appreciate the help.

      I Tried:

      .bl {
      position:fixed;
      background-image: url(../images/carrottopbackgroundLeft.png);
      background-repeat: repeat-y;
      background-position: -150px top;

      }
      .br {
      background-image: url(../images/carrottopbackgroundRight.png);
      background-repeat: repeat-y;
      background-position: 120% top;

      }
      It removes the main background and shoves the site over to the left.

      Am I missing something?
    • Brook Hurd
      Binary I.T. Solutions, Inc.
      www.binaryitsolutions.com
      This email address is being protected from spambots. You need JavaScript enabled to view it.
      (702) 233-2487
    #792308
    • Brook Hurd's Avatar
    • Brook Hurd
    • Rocketeer
    • Posts: 50
    • Thanks: 0
    • Live Long and Prospe

    Re: Add Side Images for Border

    Posted 13 years 1 month ago
    • This one is consistent, but I need to move the background image over.

      Code so far:

      .bl {
      background-image: url(../images/carrottopbackgroundLeft.png);
      background-repeat: repeat-y;
      background-position: left top;
      position: relative;
      }
      .br {
      background-image: url(../images/carrottopbackgroundRight.png);
      background-repeat: repeat-y;
      background-position: right top;
      position: relative;
      }
    • Brook Hurd
      Binary I.T. Solutions, Inc.
      www.binaryitsolutions.com
      This email address is being protected from spambots. You need JavaScript enabled to view it.
      (702) 233-2487
    #792313

Time to create page: 0.062 seconds