Sometimes it's a nice effect to place a large image file in the header that hangs over the menu bar and/or goes above the upper margin, etc. Typically, it's easy to do this by adding a high
z-index number to the image in style.css.
However, Template Toaster currently makes this effect needlessly difficult because it won't allow you to add an image larger than the header boundaries. It automatically resizes that image to fit. Perhaps this was meant to be a feature, but I don't think it's beneficial.
Take a look at my test site:
My test area, especially the box with the the phrase "You wouldn't believe how hard this is to do."
Here are the steps I had to take to make that happen.
(As I mentioned in another post, this page is a little unusual, a 900px-wide sheet area with 1200px-wide header and footer. But that doesn't affect the outcome below.)
I dropped a 200px-wide by 400px-tall graphic onto the header. Since the header is only 150px tall. TemplateToaster automatically resized the graphic down to fit within that container. Next, I tried to slide the graphic all the way to the right (where you see it is now) but it wouldn't go past the sheet boundaries, even though the header boundaries were much wider. So there were now two problems: It was too small and misplaced.
Because TemplateToaster resized my image, I had to FTP my original graphic file over to the /images directory and rename it headerforeground01.png so I'd finally have the correct-size image showing up. As I continue to work on the site, I'll have to do that
every time I export this theme.
Then I had to pull up style.css from within WordPress. I added this at the bottom.
.headerforeground01
{
background: url(images/headerforeground01.png) ;
background-repeat: no-repeat;
top: 0%;
left: 0%;
width: 200px !important;
height: 400px !important;
position: absolute;
transform:rotate(0deg);
z-index: 9999;
}Then I began changing the top and left values and refreshing the site until I had the image placed what I wanted, which turned out to be
top: -10%;
left: 94%Then, of course, I had to recopy that back into the Preferences section so I don't have to do it again!
That's a
ton of work for a simple effect, most of which could have been avoided if TT didn't resize imported images to fit boundaries. I vote that you let us do any resizing we need.
Thanks for listening!