How to add background image instead of text

HavaLite CMS

A new liteweight Content Management System (CMS)

How to add background image instead of text

I was trying to find a good solution on how to chnage the Banner text of my theme with a background image. I found many solutions which are not always compatible to all browsers. Thus i decided to try it by my self and came with this solution.

I noticed that most people want to change the banner Text, which mostly assigned with a ID or CLASS in there html file:

Suppose we have our banner text in a div element like we find in wordpress or havalite themes:

<div id="theBanner">
<h1>The Title of my Blog</h1>
<small>The Tagline, a small description of my Blog</small>
</div>

the easiest and efficient way to remove the text by changing the stylesheet is to call (display:none) for all elements within the DIV "theBanner". This will also decrease the height of our banner, but its no problem, because we need to fit our banner according to the background image, so we have to change the properties of the DIV element:

CSS:

#theBanner * { 
  display:none; 
}
#theBanner { 
  background-image:url(the_url_adresse_of_the_banner_image.jpg); 
  background-repeat:no-repeat; 
  background-position:10px; 
  display:block; 
  height:120px;
  width:600px;
}

So, i hope this works for you :)

comments powered by Disqus

0 Comments

    Leave a Reply

    Contact Info

    Phone: +49 941 26175

    Address: Ayman Teryaki,
    Prüfeninger Str. 48,
    93047 Regensburg, Germany

    Want more info - go to our contact page or visit Google+

    Social

    Stay up to date. Subscribe via RSS, Facebook, Twitter or Email

    Recent Comments