So as I mentioned in yesterday’s post, I have been putting in a lot of hours trying to get my website up and running. As such, I have actually come across a lot of great information for beginning web designers and had planned to share a list of tips and tricks that I learned now that it is Website Wednesday. However, late last night, I solved an ongoing problem that I had been having with backgrounds in Dreamweaver and could find no solution other than code workarounds and things I just could not figure out as a beginner. I want to write these website posts in as plain English as possible, but for the sake of this post not taking a full work week to write, I am going to jump ahead and assume you were able to create a page and then make it into a template. You have set you body text, maybe an image header or the copyright year as an editable region, but alas, you can find no way to make your background image or color editable in your template. I am referring specifically to the .body background, NOT the .container background, I haven’t figured that one out quite yet and it is not something I need for the time being. Well look no further, I randomly stumbled across this solution while trying to solve a second problem I was having, so a shout out to dumb luck. This very well may go against the laws of the coding gods, but all I know is I now have six different backgrounds on six different pages.
Step 1. Remove the background image from your template. You can set a background color (as long as that is not specific to your page), but don’t include any background image.
Step 2. Create a new page from your template. You should now have a page that only lets you interact with your editable regions, as defined in your template. Since you can’t define the body, it is one of those locked up regions. You would be able to click on the .body CSS rule and change the background image there, but that would apply to all of the pages using the template, so don’t do that.
Step 3. Right click somewhere in an editable region, container, sidebar, etc. Go all the way to the bottom of the menu and select ‘Page Properties’ Appearance (CSS) should be the default tab, and on there you will see a list of page options, the important one being ‘Background Image:’. Browse for your file, and open it. Click apply and you should see your background image appear in the body of your webpage. Voila! Repeat this for as many pages as you need and you will have a different one on each page.
I apologize for the lack of pictures for this. I really wanted screenshots for each step, but for some reason they were scaling really poorly and became completely illegible. If any part of this is confusing, please let me know and I will do my best to clarify. Also, if there is some reason that I am overlooking why this would not actually work down the road (it is working as far as what I have now) PLEASE leave me a comment and let me know so I can try and find another way to do it. Hope you all had a great Wednesday, see you tomorrow for Test Kitchen Thursday!
365 New Things That I Didn't Know Last Year 