MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* 1. Target the top header block in Vector Legacy */
#mw-head {
    /* Replace YOUR_IMAGE_URL with your actual uploaded image URL */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://pbs.twimg.com/profile_banners/2049672463005474816/1778779323') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    height: 160px; /* Gives the header enough room to show the banner */
}

/* 2. Adjust the main page content downward so it doesn't overlap your new banner */
#content, #mw-panel {
    margin-top: 160px !important; /* Must match the height of your #mw-head above */
}

/* 3. Make the navigation tabs and text white so they remain readable over the image */
#p-personal ul li a,
#left-navigation .vectorTabs li a, 
#right-navigation .vectorTabs li a,
#p-search h3 {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

/* 4. Fix tab backgrounds so they blend into your banner */
.vectorTabs, .vectorTabs li, .vectorTabs li a {
    background-image: none !important;
    background-color: transparent !important;
}

/* 5. Highlight the active tab slightly so users know what page they are on */
.vectorTabs li.selected {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-radius: 4px 4px 0 0;
}