Header background image

ButlerkidButlerkid Registered Users Posts: 260 Major grins
edited August 10, 2013 in SmugMug Customization
I would like to try to add a semi-transparent image under my Header ( the Menu, text and Logo) across the entire site.

Is this crazy-impossible? LOL!

Comments

  • CindyCindy Registered Users Posts: 542 Major grins
    edited August 8, 2013
    It shouldn't be but I've been trying to do basically the same thing with no how to yet. Smugmug help desk told me that 'That would be tricky but might be possible… keep checking dgrin.' So Frustrating…
    Cindy Colbert (Utterback) • Wishing You Co-Bear Love, Hugs & Laughter!!!
  • TomRoperTomRoper Registered Users Posts: 48 Big grins
    edited August 8, 2013
    Try this code. You'll need the url of the image. The repeat instructs how to repeat the image, in this case along the x axis.
    .sm-page-layout-region-header {
    background: url(image url goes here) repeat-x;
    }
    
  • CindyCindy Registered Users Posts: 542 Major grins
    edited August 8, 2013
    TomRoper wrote: »
    Try this code. You'll need the url of the image. The repeat instructs how to repeat the image, in this case along the x axis.
    .sm-page-layout-region-header {
    background: url(image url goes here) repeat-x;
    }
    

    Tom that's awesome & although a longer way around what I was wanting to do… I think it'll work (just need to create the image). On legacy smugmug (still active) I had a header bar that floated behind my logo & nav… but in the new smugmug I can't find away to place it under them… See at www.Co-Bear.com To do so I used this CSS:
    #CB_HeaderBar {
        position: relative;
        background: #c0c0c0;
        height: 48px;
        width: auto;
        margin-top: 130px;
    }
    

    And this in the html:

    [HTML]<div id="CB_HeaderBar">[/HTML]

    So my question would be is which way is the better work around? To create & use an image as you've shown or continue looking for code to layer it behind?
    Cindy Colbert (Utterback) • Wishing You Co-Bear Love, Hugs & Laughter!!!
  • jwashburnjwashburn Registered Users Posts: 476 Major grins
    edited August 8, 2013
    Cindy wrote: »
    Tom that's awesome & although a longer way around what I was wanting to do… I think it'll work (just need to create the image). On legacy smugmug (still active) I had a header bar that floated behind my logo & nav… but in the new smugmug I can't find away to place it under them… See at www.Co-Bear.com To do so I used this CSS:
    #CB_HeaderBar {
        position: relative;
        background: #c0c0c0;
        height: 48px;
        width: auto;
        margin-top: 130px;
    }
    

    And this in the html:

    [HTML]<div id="CB_HeaderBar">[/HTML]

    So my question would be is which way is the better work around? To create & use an image as you've shown or continue looking for code to layer it behind?

    You can do it the exact same way you do it now.

    Customize your site, make sure you are on entire site and edit the code where your logo is and put in the HTML If you copy everything below it will take your nav bar as well, which I assume you want
    <div id="CB_HeaderBar">
    <div id="my_banner"><a href="http://www.co-bear.com" id="yui_3_8_0_1_1375983034541_48"><img width="270" border="0" height="200" alt="Co-Bear Photography - Your Love, Hugs &amp; Laughter - Wedding &amp; Portrait - Lifestyle Photographer Cindy Colbert (Utterback) and Danny Colbert. Based in Nebo, Illinois serving the local areas of Nebo, Pleasant Hill, Pittsfield, Winchester, Jacksonville as well as Cindy's hometown Missouri areas near Mark Twain Lake including Perry, Vandalia, Bowling Green, Lousiana, and Hannibal, MO. or at the destination location of your dreams." src="/img/spacer.gif" id="yui_3_8_0_1_1375983034541_47"></a></div>
    <div id="navcontainer">
    <ul id="yui_3_8_0_1_1375983034541_39">
    <li><a href="http://www.Co-Bear.com">Home</a></li> •
    <li id="yui_3_8_0_1_1375983034541_41"><a href="/gallery/29999218_zKrjmm" id="yui_3_8_0_1_1375983034541_40">Portfolio</a></li> •
    <li id="yui_3_8_0_1_1375983034541_38"><a href="/Information" id="yui_3_8_0_1_1375983034541_37">Information</a></li> •
    <li><a href="/Clients">Clients</a></li> •
    <li><a href="/gallery/781066">Guestbook</a></li> •
    <li><a href="/gallery/10294026_YRVd8">Contact</a></li> •
    <li><a href="http://blog.co-bear.com/">Blog</a></li>
    </ul>
    </div>
    </div>
    

    then switch to the CSS tab and put in your CSS
    #CB_HeaderBar {
        background: none repeat scroll 0 0 #FFFFFF;
        height: 48px;
        margin-top: 130px;
        position: relative;
        width: auto;
    }
    
  • TomRoperTomRoper Registered Users Posts: 48 Big grins
    edited August 8, 2013
    Thanks Joey, I misunderstood and thought she wanted an image across the whole header section.
  • CindyCindy Registered Users Posts: 542 Major grins
    edited August 8, 2013
    jwashburn wrote: »
    You can do it the exact same way you do it now.

    Customize your site, make sure you are on entire site and edit the code where your logo is and put in the HTML If you copy everything below it will take your nav bar as well, which I assume you want
    <div id="CB_HeaderBar">
    <div id="my_banner"><a href="http://www.co-bear.com" id="yui_3_8_0_1_1375983034541_48"><img width="270" border="0" height="200" alt="Co-Bear Photography - Your Love, Hugs &amp; Laughter - Wedding &amp; Portrait - Lifestyle Photographer Cindy Colbert (Utterback) and Danny Colbert. Based in Nebo, Illinois serving the local areas of Nebo, Pleasant Hill, Pittsfield, Winchester, Jacksonville as well as Cindy's hometown Missouri areas near Mark Twain Lake including Perry, Vandalia, Bowling Green, Lousiana, and Hannibal, MO. or at the destination location of your dreams." src="/img/spacer.gif" id="yui_3_8_0_1_1375983034541_47"></a></div>
    <div id="navcontainer">
    <ul id="yui_3_8_0_1_1375983034541_39">
    <li><a href="http://www.Co-Bear.com">Home</a></li> &#8226;
    <li id="yui_3_8_0_1_1375983034541_41"><a href="/gallery/29999218_zKrjmm" id="yui_3_8_0_1_1375983034541_40">Portfolio</a></li> &#8226;
    <li id="yui_3_8_0_1_1375983034541_38"><a href="/Information" id="yui_3_8_0_1_1375983034541_37">Information</a></li> &#8226;
    <li><a href="/Clients">Clients</a></li> &#8226;
    <li><a href="/gallery/781066">Guestbook</a></li> &#8226;
    <li><a href="/gallery/10294026_YRVd8">Contact</a></li> &#8226;
    <li><a href="http://blog.co-bear.com/">Blog</a></li>
    </ul>
    </div>
    </div>
    

    then switch to the CSS tab and put in your CSS
    #CB_HeaderBar {
        background: none repeat scroll 0 0 #FFFFFF;
        height: 48px;
        margin-top: 130px;
        position: relative;
        width: auto;
    }
    

    Thanks Joey but it's not working :-( and no, I didn't want to use the old nav… I like the new navs drop down ease & would prefer to use it.
    I'd thought I may have found a fix because while in webdev I could remove 'Position: relative' and wham it moved it behind the logo & nav but when I go to actually add the code it still stays on top.
    Oh well… I'll try just adding an image & report back.
    Cindy Colbert (Utterback) • Wishing You Co-Bear Love, Hugs & Laughter!!!
  • CindyCindy Registered Users Posts: 542 Major grins
    edited August 8, 2013
    TomRoper wrote: »
    Thanks Joey, I misunderstood and thought she wanted an image across the whole header section.

    Tom ~ It worked perfectly! Thank You!!!
    Cindy Colbert (Utterback) • Wishing You Co-Bear Love, Hugs & Laughter!!!
  • ButlerkidButlerkid Registered Users Posts: 260 Major grins
    edited August 8, 2013
    I was actually asking for how to use a semi transparent image in the background of my header. I guess I need to save the image at whatever opacity I want. Then link that image.

    I have a menu container, a text container and a logo container at the top of my website. Is there any way to put the image behind those 3 items, stretching from side to side?

    I'm not familiar with coding....will this coding work?

    .sm-page-layout-region-header {
    background: urlhttp://butlerkid.smugmug.com/Travel/UnitedStates/Utah-1/i-CDr7rZJ/A repeat-x;
    }

    Thanks so much!
  • TomRoperTomRoper Registered Users Posts: 48 Big grins
    edited August 8, 2013
    Butlerkid wrote: »
    I was actually asking for how to use a semi transparent image in the background of my header. I guess I need to save the image at whatever opacity I want. Then link that image.

    I have a menu container, a text container and a logo container at the top of my website. Is there any way to put the image behind those 3 items, stretching from side to side?

    I'm not familiar with coding....will this coding work?

    .sm-page-layout-region-header {
    background: urlhttp://butlerkid.smugmug.com/Travel/UnitedStates/Utah-1/i-CDr7rZJ/A repeat-x;
    }

    Thanks so much!

    You just need to add parenthesis like this.
    .sm-page-layout-region-header {
      background: url(http://butlerkid.smugmug.com/Travel/UnitedStates/Utah-1/i-CDr7rZJ/A) repeat-x;
      }
    
  • TomRoperTomRoper Registered Users Posts: 48 Big grins
    edited August 8, 2013
    Butlerkid wrote: »
    I was actually asking for how to use a semi transparent image in the background of my header. I guess I need to save the image at whatever opacity I want. Then link that image.

    I have a menu container, a text container and a logo container at the top of my website. Is there any way to put the image behind those 3 items, stretching from side to side?

    I'm not familiar with coding....will this coding work?

    .sm-page-layout-region-header {
    background: urlhttp://butlerkid.smugmug.com/Travel/UnitedStates/Utah-1/i-CDr7rZJ/A repeat-x;
    }

    Thanks so much!
    Cindy wrote: »
    Tom ~ It worked perfectly! Thank You!!!

    Your welcome Cindy
  • ButlerkidButlerkid Registered Users Posts: 260 Major grins
    edited August 10, 2013
    WooHOOOOO!

    Tom, thanks so very much! AMAZING! wings.gif

    Now I just need to find an image I can crop to about 1900x200...with the right subject...and the right colors!
Sign In or Register to comment.