Header with different background image for each page

dorinake

Hi all,

FIrst of all, here's my website: http://www.dorinbofan.com/. It went through a lot of customizations over the years as I tried to make it as simple and as clean as possible. Now I want to improve the look and feel a bit further. My question is if there's a way to make a header similar to that of smugmug main website. Basically, what I'm interested in is having a stretchy image background different for each section of the website on top of which I should be able to place the logo and the menu, an overlay text and an arrow pointing down.

I already found a great tutorial here: https://portal.photom.me/portal/how-to-add-a-full-screen-header-to-your-smugmug-site/. But unfortunately it doesn't do everything I'm after. Also, it doesn't allow for a full-width header and a fixed body like I would want.

If you guys have any tips on how to achieve this, I'd be really grateful. Thank you.

tomnovy

Hey There,

I am glad you liked my tutorial. The header is full width so not sure what you meant - could you please clarify? I am using it on my homepage: http://www.photom.me/

And as you can see it is full width.

dorinake

Hi Tomasz,

Thank you so much for the reply. I was actually about to send you an email. So the header is indeed full width, but I'm trying to achieve a look more similar to that of the smugmug main website. This implies getting the logo and the menu above the full-screen background image (or maybe even overlaping on top), having a different header (background image and overlay text) on each section of my website and keeping a full width header while the body remains fixed at 1200px (without having to put spacers on each page). I believe it's possible, but my html and css knowledge is quite limited, so I'd appreciate some directions or work-arounds that I could try.

tomnovy

Hey There,

You could just add the logo and navigation to a header section { ENTIRE SITE } and PIN that section so it stays visible on scroll. Then in the homepage section add the full screen header from my tutorial.

dorinake

Thanks for the tip, Tomasz. But I'm afraid it doesn't work or I don't understand how I should do it. The logo and the nav bar are already placed in the header section on the entire site. And my homepage is different in design from the rest of the website. More so, I would need to add your code to each section of my website, so it's a different image in About, in Photo Tours, in Stories, in Images and so on. Just like smugmug has it. It's a different header image on the mainpage https://www.smugmug.com/, on their About section https://www.smugmug.com/about and so on. The funny thing is they have a completely different design and platform (modern looking and up with the latest standards) on their website, yet they lack that design in their themes they're offering.

tomnovy

Hey there,

You would need to make your homepage not custom - so the navigation from the ENTIRE SITE section will appear also on your homepage.

Sections - this will be more difficult - because you would need to apply the customization to each section individually { full screen header }.

dorinake

Thanks, Tomasz. Seems quite a task, as I've imagined. Homepage is doable indeed, but I'm aiming at changes on the whole website. Applying the customization to each section means that the header would have to be customizable on each page. And that's not the case. At least with the theme I have now. I'll give it a try, but I'll also think of other platforms in the future. Smugmug has been a reliable one so far, but I think it's time they update their themes, to be up there with the competition - squarespace and such.

Allen

I have banners applied all over my site with different backgrounds using a single widget.
In the header area I added one "empty" HTML widget then applied different backgrounds with CSS to different areas of my site.

Then also in the header, you probably could add a logo and menu and with CSS get them to overlay this HTML widget background.
All you'd have to do then is assign different background with CSS to different areas of your site. Use "parentnode" to flow down from folders.
Small example of my CSS. Order is important. "site wide" first then add overrides for different areas next. Notice only one widget number, 12536016, everywhere. "zsB4B" is my homepage, "D2dwD" is top archery folder.

     /* site wide */
.sm-page-parentnode-zsB4B .sm-page-widget-12536016,
.sm-page-node-zsB4B .sm-page-widget-12536016 {
   background: url(/photos/i-snFwjZ3/1/XL/i-snFwjZ3.jpg) no-repeat; 
   height: 154px;  max-width: 1032px;
   position:relative;
   margin: 0 auto !important;
   background-size: contain !important;
}

     /* archery */
.sm-page-parentnode-D2dwD .sm-page-widget-12536016,
.sm-page-node-D2dwD .sm-page-widget-12536016 {
   background: url(/photos/i-2r6NDBZ/1/XL/i-2r6NDBZ.jpg) no-repeat; 
   height: 77px;  max-width: 1024px;
   position:relative;
   margin: 0 auto !important;
   background-size: contain !important;
}

dorinake

Thank you so much for the reply, Allen. Very much appreciated. I've tried your code on my Images folder http://www.dorinbofan.com/Images, but it doesn't seem to be working. My homepage has a different look than the rest of the website, so I would need the code only on the other folder/pages of my website. Here's the code I've put in the empty html:

/* site wide */
.sm-page-parentnode-pjzh7 .sm-page-widget-18586592,
.sm-page-node-pjzh7 .sm-page-widget-18586592 {
background: url(https://photos.smugmug.com/SiteContent/SiteContent/n-zVqXb/i-BZ3sMdN/0/493a197c/O/i-BZ3sMdN.jpg) no-repeat;
height: 900px; max-width: 1920px;
position:relative;
margin: 0 auto !important;
background-size: contain !important;
}

 /* images */

.sm-page-parentnode-TKZhZ .sm-page-widget-18586592,
.sm-page-node-TKZhZ .sm-page-widget-18586592 {
background: url(https://photos.smugmug.com/SiteContent/SiteContent/n-zVqXb/i-BZ3sMdN/0/493a197c/O/i-BZ3sMdN.jpg) no-repeat;
height: 900px; max-width: 1920px;
position:relative;
margin: 0 auto !important;
background-size: contain !important;
}

Also, I'm wondering if the code makes the images responsive, so it resizes depending on the screen resolution.

Allen

Edit: Hang on a sec.
Got image to show but now looked at your CSS above. What I found is like I found below, not both rules.
Edit: found both now.
Also, you have the same photo in both "site wide" and "images"?

BTW, this CSS has to go in "site wide" CSS not in the HTML widget I think.

Found this in your CSS
.sm-page-widget.sm-page-widget-18586592 .sm-page-parentnode-TKZhZ .sm-page-widget-18586592,
.sm-page-widget.sm-page-widget-18586592 .sm-page-node-TKZhZ .sm-page-widget-18586592{...

Try this
.sm-page-parentnode-TKZhZ .sm-page-widget-18586592,
.sm-page-node-TKZhZ .sm-page-widget-18586592{...

Allen

You are using a huge 900px high photo in the header and pinning the header. I don't think that leaves much space for content scroll below.

For an image in a pinned header, wide and short would work much better for showing content below.

Your photo has the subject mainly in the center. As the browser is shrunk all the way down to mobile the total photo gets smaller.