Moxie (bemocked) wrote in component_help,
Moxie
bemocked
component_help

background image in title component? help please?

Is there a clever way to add a background image to the title component, "wallpaper" style, so that it will be sized to fit/fill the Title component regardless of the screen resolution or browser window size of the viewer?

I realize I can add an image into the title bar component via the
function print_my_entries(Page p, string title) {}
part of my theme layer, but that is not what I am seeking. I want an image to fill the entire component, with my title, and subtitle text appearing over the background image.


So far I have come closest by adding this:

"""
<style type="text/css" media="screen">
.userTitle {
background-image: url(http://www.myimagelocation.com/image.jpg);
}
</style>
""";


to my function Page::print_custom_head() section of my theme layer, as this did fill-in the area behind the actual title text in my title component with the background image, but since I also have a subtitle displayed underneath the title text and I have jerry-rigged a means to get additional padding-space in my title component with a few additional:

""" <div class="userSubtitle"> """; print_spacer(); """ </div> """; 
lines strategically added into the
function print_my_entries(Page p, string title)
area of my theme layer where I format my title bar, the results are an unsatisfactory horizontal strip of background image behind the title text, with my header background solid-color filling the rest of the component area, as seen in this snipit of a screen shot:



Any ideas to have an image fill into the entire background of the title component? Is there a means to define the background of the title component with an img url instead of a color without changing the background for all of the headers for all components on the page?
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

  • 8 comments