How to remove background from breadCrumb

Tags: css,jsf,jsf-2,primefaces

Problem :

I have this breadCrumb. How I can remove the background. I want just to display the links without any background.

    <p:breadCrumb style="font-size:11px;">
        <p:menuitem value="Datacenters" url="#" />
        <p:menuitem value="Zone" url="#" />
        <p:menuitem value="Rack" url="#" />
        <p:menuitem value="Server" url="#" />
        <p:menuitem value="Processor" url="#" />
        <p:menuitem value="RAM" url="#" />
        <p:menuitem value="HDD" url="#" />

Into the manual I found that I have to change the css class .ui-breadcrumb in order to change the background. But how I can override the background?


This is the css class responsible for background:

.ui-widget-header {
    background: url("/DX-57/RMC-57/javax.faces.resource/images/ui-bg_diagonals-   thick_6_333333_40x40.png.html?ln=primefaces-aristo") repeat scroll 50% 50% #333333;
    border: 1px solid #333333;
    color: #FFFFFF;
    font-weight: bold;

Solution :

In your .css file (at the end of it), or in your header in tags:

.ui-breadcrumb{background-color: none;}

More i can´t do with this less informations.

edit: If that doesn´t work:

.ui-breadcrumb{background-color: none!important;}

that should do the trick.

another edit: if it´s an image:

.ui-breadcrumb{background-image: none;}

    CSS Howto..

    Z-index issues - How to bring a child element onto the parent's below element?

    How to customize style of numeric “li” in css [closed]

    how to deal with suffix and prefix in css

    change of encoding shows Weird symbols

    How to put all my elements in line horizontally and Should be Responsive using bootstrap?

    How to use css in extjs to modify the “browse files” button?

    My sidebar is going over the footer. How can I sort this out?

    How to wrap text in css

    How can I get my input text to move to the left up against the preceding label?

    How can I align my HTML components with CSS?

    How to make arc-in animation on a website - CSS or JavaScript?

    How to change CSS in Magento

    How to use Ant to concatenate CSS files from external CSS @import file

    Unsure how to use border-bottom in CSS

    How to style this button in CSS to appear pushed down?

    How can set text row limit using angularJs ng-repeat?

    css for modal - how to position it above page yet scrollable in window

    How do i put text under an img icon in a menu?

    How can I force form elements to render the same across browsers?

    How can I separate and make a menu with these links in CSS without using unordered lists [closed]

    How to Overcome Bootstrap's Default Styling? Element targeting issues?

    How to make a CSS element extend beyond all borders of containing div?

    How Do I Anchor tag in XSLT?

    How can I center my ul li list in css?

    How to make vertical text change into horizontal text in css?

    How to download an Html page and its internal files in android?

    How can I target these children divs with one selector?

    How to crop an image edge

    How to use setInterval

    Any idea how to add this sinking hover effect to an image/link?