0
Welcome Guest! Login
0 items Join Now

fixed background image won't fix!

Last Post
Search Topic

  • fixed background image won't fix!

    Posted 12 years 10 months ago
    • it keeps on scrolling!
      I'm editing style3.css
      gantry on joomla 2.5

      currently have
      body {background: url(../images/template/background.jpg) !important;

      after trying a wide variation of solutions, including variations on:
      #background {
    background: url("../images/body/background.jpg") no-repeat scroll 50% 0 transparent;
    min-height: 1200px;
}
 
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

      I either end up with no image, or a scrolling image (as I have now)

      When I add the additional CSS code, it seems like the !important tag loses relevancy to the image - maybe that's something to do with it?

      Anyway - I know this is probably basic stuff, but would appreciate any tips or pointers.
    #828413
    • Cliff Pfeifer's Avatar
    • Cliff Pfeifer
    • Preeminent Rocketeer
    • Posts: 8444
    • Thanks: 20
    • Website Developer

    Re: fixed background image won't fix!

    Posted 12 years 10 months ago
    • Hi, you're not indicating in your code that the background is fixed, so it's not fixed. You have to have either fixed in your shorthand background property - you have scroll - therefore it scrolls. Or use background-attachment:fixed; if you're doing it long hand, as in your body example. Maybe this link can help: www.w3schools.com/cssref/pr_background-attachment.asp
    • The difficult we do immediately, the impossible takes a little longer.
    #828544

  • Re: fixed background image won't fix!

    Posted 12 years 10 months ago
    • thanks Cliff.

      i tried
      body {background: url(../images/template/bg-bright.jpg) !important; background-repeat:no-repeat;
background-attachment:fixed;}
      but it still scrolls & repeats

      then I tried
      body {background: url(../images/template/bg-bright.jpg); background-repeat:no-repeat;
background-attachment:fixed;}
      and the background image disappeared

      so I tried
      body {background: url(../images/template/bg-bright.jpg); background-repeat:no-repeat;
background-attachment:fixed; !important;}
      still no image

      so I reverted to
      body {background: url(../images/template/bg-bright.jpg)!important;}
      back to square 1!

      is it my syntax, or perhaps some css elsewhere overriding the style3.css?
      I miss tables! :cheesy:
    #828647
    • Cliff Pfeifer's Avatar
    • Cliff Pfeifer
    • Preeminent Rocketeer
    • Posts: 8444
    • Thanks: 20
    • Website Developer

    Re: fixed background image won't fix!

    Posted 12 years 10 months ago
    • Hi, you're doing a few things wrong. Basically you're shooting yourself in the foot with the !important. Since you are using a shorthand background declaration - all the background properties are included in that statement, even the ones you don't put there, if they are not defined they use the default values. By default, background attachment is scroll, so if you don't define it, it automatically scrolls. By adding the !important you've essentially put background-attachement: scroll !important; - which will override any other CSS background declarations for that same element, unless you use !important in those as well.

      A few tips, stay away from !important unless you have a specific reason to use it, like you need to override an inline style, or it just needs to be different in one location for example. As you can see with your example, it's causing unnecessary problems. You don't want to get into the habit of using it over and over again on everything. If you use it too much, it just becomes extra code you have to start adding it to everything to make it work. A good way to see if you need it is to look in a web inspector and see if your CSS is crossed out, meaning it's being overriden by another style. Then, and only then, should you consider using it. If you don't see the code, or it's not working for another reason, adding !important most likely won't do the trick.

      If you're going to do background styles, either use shorthand, or use long hand, but not a combination of both, as you are doing. There may be times when you need to use both, but it's definitely more of an exception than a standard method. You can define all of the background properties in the shorthand background declaration, and you want to, otherwise they will use the defaults. See this link for a full explanation, the example code right at the top is along the same lines as what you want to do: www.w3schools.com/cssref/css3_pr_background.asp

      Hope that helps, if not, please provide a link to your site.
    • The difficult we do immediately, the impossible takes a little longer.
    #828655

  • Re: fixed background image won't fix!

    Posted 12 years 10 months ago
    • Thanks Cliff - I really appreciate your help,
      I added the CSS as you suggested, and it reverted to no background image at all, so I did what I should have done a lot earlier and opened firebug to see what was going on - it looks as if the CSS I'm defining in Style3.CSS is being overidden by the settings defined in the 'style' tab in the gantry template settings in Joomla admin.

      This appears to be generated by gantry template settings (it's inline):
      body {
    background: none repeat scroll 0 0 transparent;
}

      This text is crossed out:
      /rootfolder/ (line 18)
body {
    background: url("../images/template/bg-bright.jpg") no-repeat fixed center center #1F1F1F;
}
      edit: the additional "center" isn't mine!

      This is also present...not sure where it's from though as it isn't in style3.css!
      style3.css (line 9)
body {
    color: #333333;
}

      I'm assuming that because gantry is defining a specific background through the admin interface, that gets priority over my hacking away at the style3.css - not sure what I need to edit to change this though?
    #828805

  • Re: fixed background image won't fix!

    Posted 12 years 10 months ago
    • well - sorry Cliff, I ended up using !important to get things working, and it turned out my poor syntax was to blame...
      this wasn't working
      body {background: #1F1F1F url('../images/template/bg-bright.jpg') no-repeat fixed center; !important;}
      and this did
      body {background: #1F1F1F url('../images/template/bg-bright.jpg') no-repeat fixed center !important;}
      just the ;
      :oops:
      thanks for your help...
    #828969
    • Cliff Pfeifer's Avatar
    • Cliff Pfeifer
    • Preeminent Rocketeer
    • Posts: 8444
    • Thanks: 20
    • Website Developer

    Re: fixed background image won't fix!

    Posted 12 years 10 months ago
    • Ah - those semi colons can get you. Technically, if you only have one property, or it's the last property in the list right before the bracket, you don't need to use one at all. I always do, just to keep it consistent. Now that you know that can happen, you'll always look for it.

      You would be correct in using important for overriding a setting that comes from the backend color chooser - that is an easy way to do it. Sometimes though, you'll want to modify the styledeclaration.php file - which is where those inline styles are generated using the color chooser values. It's in the features folder of the Gantry framework folder, copy it to the features folder in your template and then you can change the CSS properties or remove the elements you don't want assigned to color choosers, or add new ones. If you do it like that, important becomes less important, as you won't have to use it. Hope that helps.
    • The difficult we do immediately, the impossible takes a little longer.
    #829094

Time to create page: 0.064 seconds