Header background image

Butlerkid · August 7, 2013

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!

Cindy · 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…

TomRoper · 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;
}

Cindy · 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?

jwashburn · 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;
}

TomRoper · August 8, 2013

Thanks Joey, I misunderstood and thought she wanted an image across the whole header section.

Cindy · 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 · 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!!!

Butlerkid · 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!

TomRoper · 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;
  }

TomRoper · 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

Butlerkid · August 10, 2013

WooHOOOOO!

Tom, thanks so very much! AMAZING!

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

Header background image

Comments