0
Welcome Guest! Login
0 items Join Now

How do I put a background color/image on a responsive site..

Last Post
Search Topic
    • DDahl's Avatar
    • DDahl
    • Rocketeer
    • Posts: 55
    • Thanks: 0

    How do I put a background color/image on a responsive site..

    Posted 12 years 7 months ago
    • Hello,

      I am using the Gantry 4 template and am wondering how I can wrap the responsive site in a master div and not have it travel from edge to edge on a large screen. That way I can have a nice solid background color/image as needed.

      Thanks!

      -David
    #862262

  • Re: How do I put a background color/image on a responsive site..

    Posted 12 years 5 months ago
    • Did you ever figure this out?
    • Google Analytics Certified Individual.
    #890363
    • MiD-AwE's Avatar
    • MiD-AwE
    • Jr. Rocketeer
    • Posts: 35
    • Thanks: 1

    Re: How do I put a background color/image on a responsive site..

    Posted 12 years 5 months ago
    • If you make your gantry-custom.css file in your templates/gantry/css folder as mentioned in other post then add:

      body {
      background: url(../images/backgrounds/yourBackgroundImg.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/backgrounds/yourBackgroundImg.jpg', sizingMethod='scale');
      -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/backgrounds/yourBackgroundImg.jpg', sizingMethod='scale')";
      }

      to the gantry-custom.css file. Obviously place your image into the templates/gantry/images/backgrounds folder and it will work. :)

      Also, you are probably aware that you can choose your own directories and file names, but I thought I would mention it any way.
    • A wise person will not attempt to "reinvent the wheel" but use it along the way to greater things. GNU/GPL is the wheel of our age.
    #894269
    • MiD-AwE's Avatar
    • MiD-AwE
    • Jr. Rocketeer
    • Posts: 35
    • Thanks: 1

    Re: How do I put a background color/image on a responsive site..

    Posted 12 years 5 months ago
    • BTW - If you enable the Page Suffix option you can assign a different image for each page with the class name added by Gantry.

      example:
      body.menu-home {}
      body.menu-about {}
      body.menu-contact {}
      etc., etc.
    • A wise person will not attempt to "reinvent the wheel" but use it along the way to greater things. GNU/GPL is the wheel of our age.
    #894286

Time to create page: 0.086 seconds