Create Unique Header and Background Images for Each Page

6/10/2014

We’ve updated the Weebly background image editor to let you create unique header and background images for each page of your site. This is an important update for many of our new themes like Stripes and Haberdasher, which had previously been limited to a single header or background image across the entire site.

This update gives you more control over theme design and personalization. The image options are easily accessible from the background image editor and present three distinct choices: save to all pages, save to a single page, or save to a subset of pages.

More control means more opportunity for visual improvement. You can now insert imagery tailored specifically to your individual page content and further enhance visitor experience.

We really hope you enjoy this update, it’s the first of several big things we’re working on this summer. As always, please don’t hesitate to share your ideas with us in the comments below!

Cullen Card link

6/10/2014 02:32:03 am

How about per-page CSS? For example, I could have one page with a black background and white text, while the rest of my site has a white background with black text.

6/10/2014 02:33:20 am

P.S. Great job on this update! I can't wait to see the next updates!

soap

6/10/2014 03:17:36 am

Yes please, black and white options of the same theme (or other colours) would be brilliant.

6/10/2014 03:21:41 am

for example I am using one the recent themes and I’d love to use the ‘orange’ template for one page and the ‘red’ for the other....etc...same them...different colours...

6/10/2014 03:23:19 am

It would also be nice to have per-page and relocatable navigation menus. That way, I could:
A: Move or copy my navigation menu to another part of my page, like the footer
B: Show an alternate navigation menu on certain pages

David Rusenko link

6/10/2014 04:25:26 am

You can already do this! Each page's <body> tag has a unique class name so that you can specifically target it in the stylesheet. For example, a page named About would have a class name of "wsite-page-about".

David

6/11/2014 07:24:21 pm

Great job to the team at Weebly - a good update. Any chance you can broaden the spectrum slightly and add the ability to include slideshow backgrounds....?

Thanks again - looking forward to some more updates re the membership log in / password protected pages!

Regards

Ravinder

6/18/2014 05:20:44 am

hello sir, i can provide you weebly support . pLease contact me on skype if you need .

id : w3experts.co.cc

Barton Designs link

6/10/2014 05:22:07 am

Properly made website are not supposed to have multiple CSS files... only one. If you want to create a variation of style, you do so within the supplied CSS file...

Example, if you want to have two different body backgrounds, you can use

body {
background-color:#ffffff;}

and just copy / paste that and right below use

body1 {
background-color:#000000;}

And with this you can use by duplicating a page type (by clicking "New Page Type" in the advanced theme designer tab), copy and paste all the info from another page type, and add "1" to the end of the body tag.

Hope that isn't too convoluted or inaccurate, but I had a few minutes free and thought I'd shed some light on this. Basically play around with it, and search google for CSS tips and you'll eventually figure it out :D

6/10/2014 05:23:11 am

LOL I didn't see David's response until I posted this haha.

6/10/2014 05:40:55 am

thanks, am afraid its beyond me... not that skilled in css. but thanks I am sure others will find it helpful.

harish sunshine link

6/12/2014 04:39:07 pm

hey, I am harish sunshine. iam 15 yr old and also a graphics and web designer/ developer.
see my site; www.ratanadagames.com.co.in
I would like to do partnership with you. i kindly request you to reply me again. thanks

issmir link

6/17/2014 08:54:31 pm

salut

6/17/2014 08:55:25 pm

issmir

6/10/2014 02:40:21 am

Awesome!

Erich link

6/10/2014 04:39:31 am

Wow! What a great job!

Mark Hill link

6/10/2014 04:43:44 am

This is a great feature. I use it on my site (www.markhillonline.com). What's nice is to use the 'save to selected pages' to have the same header images for all the pages in a given section of the site. You have a different header image for each page in main navigation. Then all the pages in subnavigation repeat the correct image. It provides the visitor with a subtle visual clue as to where he is on the site.

Ron Damman link

6/10/2014 04:52:34 am

The possibility to give each page its own header, that was the question i wanted to ask you guys but you allready answerd it.
You guys are doing a great job!

Barbara link

6/10/2014 04:57:47 am

Interesting

Paul Mathews link

6/10/2014 07:36:59 am

@David Rusenko, per your comment posted at 06/10/2014 11:25am: David, I was completely unaware of what you wrote regarding each page having a unique body class related to the name of the page. Am I correct in understanding that if for example I create a page named, "My Awesome Page", that would generate a body class named, "wsite-page-my-awesome-page"? If so, that is very, very cool. I know it's a bit off-topic but is there a cheat sheet of advanced HTML/CSS items like this one? Or do you have any resources specifically aimed at professional developers/designers? Thanks in advance and of course thanks for the exceptional Weebly platform.

Adam

6/10/2014 09:14:12 am

That's correct! If you had a page on your site called "My Page", for example, the <body> tag of that page would have a class added called "wsite-page-my-page".

For more detailed info on theme customizations you might want to take a look at this: http://themedocs.weebly.com

6/10/2014 10:35:08 am

Thanks Adam. I was familiar with the theme customization pages which are very useful but don't contain a lot of detail (the body class we've discussed here for example is not mentioned in the theme customization pages and I don't think those pages are properly incorporated into the Weebly Knowledge Base pages). One of Weebly's most significant advantages over all of its competitors/peers is that Weebly provides complete access to not only the site CSS but also the page HTML (and users can create their own custom page HTML). This pretty much allows designers/developers to do entirely custom work on the platform (with the exception of client-side scripting and databases). It would be great if at some point in the future, Weebly provides some dedicated resources for professional designers/developers along the lines of what SquareSpace is doing here: http://developers.squarespace.com/.

Nick link

6/10/2014 10:00:21 am

This is great, I was trying to do this manually with modifying the templates... tons of work avoided. I love you Weebly!

Zorica link

6/10/2014 11:28:12 am

I don't want to be a downer about this new feature, but I'd really prefer that Weebly put out separate passwords for different pages and the log-in feature. Also, the vertical line would be great and also a way to make an entire column a different color so there is a way to successfully offset columns. This has been mentioned a number of times before, it would be great if it was created.

Thank you.

Stew

6/11/2014 10:39:55 pm

Ditto to everything above.

Laura Lynch link

6/17/2014 11:49:04 am

More passwords??? Yikes. They are a pain in the you know what. I prefer all parts of the site be easily 'traveled through'. The pages are parts of a whole, as in a book. When I am designing and changing I do not want more obstacles.

Howard Stinson link

6/10/2014 12:19:46 pm

Thank you Weebly team, this will open many new doors

W Bothe

6/10/2014 05:17:30 pm

Great ... this is a good improvement!

Janne Markkanen link

6/10/2014 05:39:12 pm

Is there any possibility to get done <H1> titles other than CSS style, and the "Embed code" tool?
"Title" is the title of the tool <H2> level.

JkP - Quirkus link

6/10/2014 05:56:43 pm

This an awesome new feature! Thanks Weebly!

vidzzonline.com link

6/11/2014 02:50:22 am

is there any option to connect my wordpress blog http://www,vidzzonline.com with weebly.com? to share my posts on other networks?

6/11/2014 06:39:33 am

While you wouldn't be able to import your posts, you could link to your current blog from your Weebly site. A lot of users will start a new blog on their Weebly site, then add a link in the sidebar to their old blog.

As for sharing to other networks, you can share blog posts made at Weebly automatically to Facebook and Twitter, and we have a guide here to show you how: http://kb.weebly.com/social-publish-blogs.html

Kevin

6/11/2014 04:26:40 am

Great!! - Just started to use Weebly and noticed this header image limitation on the individual pages. It's great to see this option applied to the newer themes! Keep up the great work.

web design company link

6/11/2014 06:32:07 pm

The new feature is added advantage. Websites would look more attractive and according the needs.

6/11/2014 10:43:51 pm

Was just asking support about this very limitation in the headers of these new designs. Thanks for changing and making these themes more versatile Weebly!

Sergio link

6/12/2014 12:05:21 am

How about actually displaying all templates names on the selection screen?

summer link

6/12/2014 12:31:14 am

great job! - thanks.
Slideshow will be nice

Harold link

6/12/2014 12:52:05 pm

The dropdown menu option for the contact form does not work. It works on my other website, www.haroldefinitionphotography.com but not on the sndmag.weebly.com

6/15/2014 06:29:27 am

There doesn't look to be a drop-down as part of the form on the Contact page of your site. There is a form on your Submit page that includes a dropdown, though this is a form built elsewhere that you've included with custom code and not one you built in the editor.

If you want to add a dropdown to the form on your contact page, select it in the editor, then drag the Dropdown Box element to your form, customize it how you'd like, save, and re-publish.

narasimha link

6/12/2014 12:53:25 pm

good

Kizi Games link

6/12/2014 11:22:56 pm

I've been using your gadget it is very convenient for my job much easier to use special features.

Tye link

6/13/2014 03:12:29 am

Desperately trying to figure out how to keep my fonts and colors the way I designed them and not have them keep changing to be uniform through the site. Can anyone help? I submitted a request for help hours ago and haven't received a reply.

web tasarım link

6/13/2014 02:33:28 pm

teşekkür ederim.

Kalpesh link

6/13/2014 04:03:22 pm

I have created blog in weebly. i want to change the background of page. i know how to change but i am not able to change my custom theme background. which already prepared.

6/15/2014 07:04:43 am

Since you're using a custom theme, you may need to switch to a standard theme, then re-do your edits in order to have the option to use different background images on different pages.

Sonia_Here link

6/14/2014 03:39:44 am

Great job on this update! I can't wait to see the next updates!

mp4 songs pashto link

6/14/2014 05:06:11 pm

nice theme

TLCoach link

6/14/2014 11:43:31 pm

When will slide shows work with touch screen devices?

Steve Saenz link

6/15/2014 04:12:28 am

Excellent, thank you for listening :-)

max lines

6/16/2014 04:35:08 am

you guys a top in your game well done .

Money in the bank 2014 link

6/16/2014 06:06:18 pm

awsm post..:) really liked it :)

SergioLore / Gerd link

6/17/2014 12:17:51 am

wonderful, wonderful, very nice, I have been waiting a long time, not just a single image on the full site, Thank you, You have done well, please keep it up ... begets the other what you can ...
LG

Gerd / SergioLore

Andre

6/17/2014 09:25:57 am

What happened to my back ground image, its no longer populating just a white back ground

6/18/2014 05:20:30 am

We aren't sure which site you're having trouble with, but if you contact our support team they'll be able to help you out! You can reach them via live chat or email at hc.weebly.com.

Bas link

6/18/2014 03:28:09 pm

Nice to be able to have a background image on each page! Thanks!

Geronimo link

6/19/2014 12:13:02 am

Where can I update the "background image editor" ????

6/19/2014 05:30:50 am

If you don't see the option it likely means that you're using an older theme that doesn't support background images. Go to the Design tab, then click on "Change Theme", then check the box for "Supports Backgrounds". This will show you all of our themes that have the option to change the background image. :)

Fabian Leon link

6/23/2014 02:38:43 am

I really love how simple using weebly.com is, and the pics & Templates are great too.

babalwa link

6/24/2014 12:17:26 am

Great background, innovative

US Independence Day link

6/24/2014 11:01:00 pm

really loved it......:)

Crystal link

6/25/2014 05:56:32 pm

I am unable to reposition or crop header images using this new feature. I am only given the options "Fill/Center/Right/Left/Tile." Any ideas?

6/27/2014 05:27:39 am

Those are the standard options when editing the background image for a page. The theme you're using uses portions of the background image for the header area rather than separate images, so when you edit this image you'll be using the background image editor rather than the header image editor. Hope that explains what you're seeing a little better!

David link

6/26/2014 03:57:44 am

It's always a good thing when you have more control over theme design and personalization of your site. That's a top factor for me when considering a website/blog platform. Good move Weebly!

Download Game PC link

6/27/2014 02:24:42 am

Thanks Weebly.

Jess link

6/29/2014 12:39:14 pm

I love that I can have different headers on each page, but I only seem to be able to upload one custom image. Every time I go to upload a second image, it overwrites the first one, leaving a big white space where the first custom header image was.
I've noticed other commenters have had the same problem.
I'm planning to buy the business package, but hesitant as I need to upload multiple header images. Is there a space to upload multiple images so that I can change my header to previously uploaded images.

6/29/2014 12:40:37 pm

The website i'm having difficulty with is:
http://homecompany.weebly.com/

7/1/2014 09:29:04 am

Hey Jess! Could you contact our support team about your site along with the background images you'd like to use (https://weebly.zendesk.com/hc/en-us/requests/new)? Thanks!

Comments are closed.

Weebly Blog

Bring the world to your website

Create Unique Header and Background Images for Each Page

Create Your Site

Follow Updates

Subscribe to Our Newsletter