Background in header.

[Kite Trojan]

So youknow where the navigation bar is right? i want to add like a background over i. how can i proceed with this

[SLGray]

Please post your forum's link as this exactly is an appearance question, not a script question.

[Kite Trojan]

http://galacticda.forumotion.com/

[masesm]

Use this in CSS. Access that from ACP > Display > Colors > Css Stylesheet

Code:

div#page-header div.navbar {


background-image: url('IMG URL HERE' );}

Change IMG URL HERE to your background link.

Cheers.

[SLGray]

Moved to the Correct Section

[Kite Trojan]

Use this in CSS. Access that from ACP > Display > Colors > Css Stylesheet

Code:

div#page-header div.navbar {


background-image: url('IMG URL HERE' );}

Change IMG URL HERE to your background link.

Cheers.

not working

[SLGray]

Add it to the top of the styelsheet:

Code:

div#page-header div.navbar {
    background-image: url('IMG URL HERE' );
}

Or add !important to it.

[Kite Trojan]

not working still

[JScript]

@Kite Trojan

Hi, use this CSS:

Code:


.bodyline table:nth-child(2) {
  background-image: url("http://i.imgur.com/Ovzqzni.jpg");
}
.mainmenu {
  bottom: 0 !important;
}


Change "https://i.imgur.com/Ovzqzni.jpg" for the image you want!

Result:


So long,

JS

[Kite Trojan]

I need it in the header not the menu. Header is the very top of the forum

[JScript]

@Kite Trojan

You were not as specific as now!

I see only 3 possibilities, check out them:

1- https://i.imgur.com/vVuuLCO.png
2- https://i.imgur.com/W1Byuyo.png
3- https://i.imgur.com/FBF2KpY.png

Show us where is your "header"!

So long,

JS

[SLGray]

Are you referring to the logo/banner area?

[JScript]

Are you referring to the logo/banner area?

Perhaps he want an image upon of the menu, for example:


If so, here is a sample code:

Code:


.bodyline table:nth-child(2):before {
  content: url("http://i.imgur.com/MJOeQT3.jpg");
  margin-bottom: 10px;
}


So long,

JS

[Kite Trojan]

i need it above where it says Galactic Duel Academy

[SLGray]

So you want it above that and under the forum's banner/logo?

[Kite Trojan]

http://prntscr.com/2xan99 like that

[JScript]

@Kite Trojan
Finally, after 12 posts you told us what really want!!!

See if that's the way you want:


If yes, just add the following CSS:

Code:


.bodylinewidth td.bodyline div.maintitle:before {
  content: url("http://i.imgur.com/MJOeQT3.jpg");
  display: block;
}


Change "https://i.imgur.com/MJOeQT3.jpg" for the image you want!

So long,

JS

[Kite Trojan]

http://prntscr.com/2xaz1x its working good but i need like a part of it on the header.

[Pizza Boi]

Hi

Try adding top/bottom on it and add a value with px. If it doesn't move, change block to float/fixed/absolute <-- any of those 3.

Regards,
Pizza Boi

[Kite Trojan]

Tried that and nothing

[Pizza Boi]

Hi

Try this:

Code:


    .bodylinewidth td.bodyline div.maintitle:before {
      content: url("http://i.imgur.com/MJOeQT3.jpg");
      display: block;
position: absolute/fixed/float;
top: 200px;
    }


Adjust the above.

Regards,
Pizza Boi

[Kite Trojan]

Nothing happened.

[Pizza Boi]

Hi

Try using this: https://help.forumotion.com/t131165-how-to-put-the-menu-above-the-banner-hide-links

Regards,
Pizza Boi

[Kite Trojan]

that only moved my menu(home, faq etc) did nothing to my banner as in the header

[Pizza Boi]

Hi

This worked fine with me:

Code:

    .bodylinewidth td.bodyline div.maintitle:before {
      content: url("http://i.imgur.com/MJOeQT3.jpg");
      display: block;
  position: absolute;
  top: 300px;
  left: 300px;
    }

Adjust top and left. Also, if you want it to overlap, just add z-index: # in negative (-) value + px;.

Regards,
Pizza Boi

[Kite Trojan]

How can I make it overlap. My brain can't understand!!

[Pizza Boi]

Hi

Code:


.bodylinewidth td.bodyline div.maintitle:before {
      content: url("http://i.imgur.com/MJOeQT3.jpg");
      display: block;
      position: absolute;
      top: 300px;
      left: 300px;
      z-index: -1;
        }

Regards,
Pizza Boi

[Kite Trojan]

Code:

  .bodylinewidth td.bodyline div.maintitle:before {
  content: url("http://i57.servimg.com/u/f57/13/06/81/38/header11.png");
      display: block;
      position:absolute/fixed/float;
      top: 300px;
      left: 300px;
      z-index: -1;
}


I moified the code to be like that, because hte code you provied me didn't do anything. Currently, I need it to fit a whole canvas.

[Pizza Boi]

Hi

I tested it in my test forum and the one I provided worked perfectly. Maybe it's your properties or whatever.

Anyway, you want to resize the picture? Just add max-width: #px; and max-height: #px; in it.

Regards,
Pizza Boi

[Kite Trojan]

http://duelingcity2.betaboard.net/ here is another example