Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   [SOLVED] Background image in menubar (http://forum.bytesforall.com/showthread.php?t=15200)

Ber|Art Aug 24, 2011 08:52 AM

[SOLVED] Background image in menubar
 
How do I get a background image to my menubar? Thx! :)

juggledad Aug 24, 2011 09:25 AM

one way is to use a CSS insert
HTML Code:

div#menu1 {background-image: url("http://yourdomain.com/wp-content/somefolder/IMG_1496.jpg");}
then set the other parts of the menu to a transparent color.

Ber|Art Aug 24, 2011 09:29 AM

Thx! :)

You say: then set the other parts of the menu to a transparent color.

How do I set a transparent color?

Ber|Art Aug 24, 2011 09:34 AM

Oh, what is the other way ;)

juggledad Aug 24, 2011 10:21 AM

background-color: transparent;

Quote:

Oh, what is the other way
beats me, but I'm sure there is another way :)

Ber|Art Sep 20, 2011 02:52 AM

I do not get it how can I use: background-color: transparent; in > Header Area > Menu1 > Backgroud Color ? I can only use #xxxxxx code ?

juggledad Sep 20, 2011 04:31 AM

If it won't work there then you'll need to do it in the CSS inserts

Ber|Art Sep 21, 2011 01:07 AM

So then it will be:

div#menu1 {background-image: url("http://yourdomain.com/wp-content/somefolder/IMG_1496.jpg");}
div#menu1 {background-color: transparent;}

?

Ber|Art Sep 21, 2011 01:09 AM

With:

div#menu1 {background-image: url("http://yourdomain.com/wp-content/somefolder/IMG_1496.jpg");}
div#menu1 {background-color: transparent;}

juggledad Sep 21, 2011 06:12 AM

that and you may need to add
HTML Code:

div#menu1 ul.rMenu {
background: transparent;
}

remember to think of HTML elements as layers of paper. The parent layer is at the bottom and the children on top. We look top down. You can decide what each layer's color is so if you have
HTML Code:

<div id="menu1" class="menu-small-menu-container">
</div>

the <div> is the first layer - if you color this blue or use an image , that is what you will see, but what if you add a UL to it so you have
HTML Code:

<div id="menu1" class="menu-small-menu-container">
        <ul id="rmenu2" class="clearfix rMenu-hor rMenu">
        </ul>
</div>

If you add a color or image to the UL, it will cover the DIV's color/image. Then you add an LI
HTML Code:

<div id="menu1" class="menu-small-menu-container">
        <ul id="rmenu2" class="clearfix rMenu-hor rMenu">
                <li id="menu-item-11">
                </li>
        </ul>
</div>

and it's color/image will overlay the UL's (which is overlaying the DIV's). Then you have a <A>
HTML Code:

<div id="menu1" class="menu-small-menu-container">
        <ul id="rmenu2" class="clearfix rMenu-hor rMenu">
                <li id="menu-item-11">
                        <a href="mydomain.com/page1">
                        </a>
                </li>
        </ul>
</div>

and finally a SPAN
HTML Code:

<div id="menu1" class="menu-small-menu-container">
        <ul id="rmenu2" class="clearfix rMenu-hor rMenu">
                <li id="menu-item-11">
                        <a href="mydomain.com/page1">
                                <span>HOME</span>
                        </a>
                </li>
        </ul>
</div>

both of which can have a color or image so

the SPAN will be the most important
the A comes next
then the LI
then the UL
then the DIV
The amount of space each takes up will also effect what you see.

Hope this helps.

Ber|Art Sep 21, 2011 06:18 AM

div#menu1 ul.rMenu {
background: transparent;
}

Works fine now! :) Thx a lot I will donate soon again :)


All times are GMT -6. The time now is 02:07 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.