0
Welcome Guest! Login
0 items Join Now

Background Image Help

  • Background Image Help

    Posted 12 years 3 months ago
    • I'd like to use 2 background images that dock to the bottom left and bottom right sides of the site.

      Where I know how to do this if I were coding my own site and can probably "wing it" per say for RocketTheme, I'd like to ask suggestions of the best way to do it according to how RocketTheme sets up their styling. I'm going to post some other details and possible variables as I'm looking for best possible solution.

      I'm using "Kirigami" template on joomla 2.5 and everything is up to date.

      I feel as if both light & dark css files would need editing in this as the background image will change and vary in colors etc. Unless of course I'm told the solution for this is to add a seprate css file for this task.

      The images on the left and right side may or may not be the same, that will also vary.

      I would like the left image to dock at the bottom left side of the users screen and the right image to dock at the bottom right of the users screen.

      Images should stay in a fixed position while scrolling.

      I will paste my current code that I have working the way I want it to, but only on one side...
      .main-bg-none {background: #ffffff url(/images/pinnacle_bottle.jpg);
       background-repeat:no-repeat;
       background-position:left bottom; 
       background-attachment: fixed;}
      Thanks in advance for any help in this. I'm just looking for a best solution for what I'm trying to do.
    • Cliff Pfeifer's Avatar
    • Cliff Pfeifer
    • Preeminent Rocketeer
    • Posts: 8444
    • Thanks: 20
    • Website Developer

    Re: Background Image Help

    Posted 12 years 3 months ago
    • The easiest way to get around any default styling is to create your own divs or elements in the index.php - then you don't have fight it. Just because we make it in a certain way doesn't necessarily mean you have to do it that way. We don't do anything out of the ordinary, it just has to be complex to have all the backend features.

      I need a link to your website to offer advice with codes, need to see what's happening and look at your source codes.
    • The difficult we do immediately, the impossible takes a little longer.
  • Re: Background Image Help

    Posted 12 years 3 months ago
    • Cliff Pfeifer wrote:
      The easiest way to get around any default styling is to create your own divs or elements in the index.php - then you don't have fight it. Just because we make it in a certain way doesn't necessarily mean you have to do it that way. We don't do anything out of the ordinary, it just has to be complex to have all the backend features.

      I need a link to your website to offer advice with codes, need to see what's happening and look at your source codes.

      Thanks for your response Cliff. I have set it back to the default for now until I am able to get it working properly, but the url is 173.254.28.110/~bostonev/
    • Cliff Pfeifer's Avatar
    • Cliff Pfeifer
    • Preeminent Rocketeer
    • Posts: 8444
    • Thanks: 20
    • Website Developer

    Re: Background Image Help

    Posted 12 years 3 months ago
    • After reviewing your question, if you're trying to do 2 images, you will want to use two containers for them generally. CSS3 allows for more than one background image, but this effect will not be possible in older browsers, here is some information regarding how to do this:
      css-tricks.com/stacking-order-of-multiple-backgrounds/

      If you want two images, generally you want two elements to attach them to. You can attach one to the body tag as you are doing, but another HTML element would be required that is positioned how you want it in order to display the image.

      Not sure why you removed your code, as that is what I would need to see to offer advice on what is going on. I can only offer limited advice here regarding custom work, so you're going to need to have it in a state where I can address the issue you have.
    • The difficult we do immediately, the impossible takes a little longer.

Time to create page: 0.058 seconds