[piexecParticipant]

I have a site setup where I’m trying to add a background pattern to the breadcrumbs bar and its not working. Here is a link to my page:

http://clearwaterconferenceroom.com/index.php/catering/

And here is my current CSS:

.x-breadcrumb-wrap {
background-image:url(“http://clearwaterconferenceroom.com/wp-content/uploads/2016/03/pat_5.png”);

}

.x-breadcrumbs {
display: inline-block;
text-align: center;
margin: 0 auto;
width: 100%;
}
/*
// Navigation.
*/
.top-menu {
float:left;
}

.top-menu ul {
margin:0;
}

.top-menu li {
display:inline-block;
}
.top-menu li a {
padding:0 5px 0 5px;
line-height:45px;
font-size: .8em;
color:#fff;
font-weight: bold;
}

.top-menu li a:after {
content: “|”;
color:#674f96;
margin-left: 5px;
margin-right: 5px;
}
.top-menu li a:hover {
color: #674f96 !important;
}
.x-topbar {
padding: .8% 3% 0 3%;
}

.x-navbar {

box-shadow: 0 0 35px rgba(0, 0, 0, 0.25);

}

.x-navbar .desktop .x-nav > li > a:hover > span,
.x-navbar .desktop .x-nav > li.x-active > a > span,
.x-navbar .desktop .x-nav >

.x-navbar .desktop .x-nav > li > a > span > i {
opacity: 0.5;
}

.x-navbar .desktop .x-nav > li > a:hover > span > i,
.x-navbar .desktop .x-nav > li.x-active > a > span > i,
.x-navbar .desktop .x-nav > li.current-menu-item > a > span > i {
opacity: 1;
}

/*
// Buttons.
*/

.x-btn,
.button,
input[type=”submit”] {
text-transform: uppercase;
text-shadow: none;
font-weight: bold;
font-size: 14px !important;
letter-spacing: 1px;
padding: 1em 3em !important;
}

.x-btn.button-purple,
.button.button-purple,
input[type=”submit”].button-purple {
color: #ffffff;
border-color: #38255d;
background-color: #38255d;
box-shadow: 0 0.25em 0 0 #211d40, 0 4px 9px rgba(0, 0, 0, 0.75);
}

.x-btn.button-purple:hover,
.button.button-purple:hover,
input[type=”submit”]:hover {
color: #ffffff;
border-color: #211d40;
background-color: #211d40;
box-shadow: 0 0.25em 0 0 #191631, 0 4px 9px rgba(0, 0, 0, 0.75);
}

/*
// Typography.
*/

.period-white {
color: #fff;
}

.period-yellow {
color: #c59d2c;
}

.accent-yellow {
color: #c59d2c;
}

.x-li-icon i {
color: #c59d2c;
}

.section-icon {
width: 2.5em;
height: 2.5em;
font-size: 1.5em;
line-height: 2.5em;
color: #fff;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 100em;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
}

.admissions-icon {
font-size: 2.5em;
line-height: 1;
opacity: 0.425;
}

.dark-text {
color: #333;
}

/*
// Accordions.
*/

.x-accordion {
font-size: 0.85em;
}

.x-accordion-inner {
background-color: #fff;
}

/*
// Images.
*/

.img-gallery {
display: block;
width: 400px;
margin: 0 auto;
box-shadow: 0 0 35px rgba(0, 0, 0, 0.285);
}

/*
// Footer.
*/

.x-colophon.top {
background-color: #e1e6ea;
font-size: 0.875em;
}

.x-colophon.top a {
color: #777777;
}

.x-colophon.top a:hover,
.x-colophon.top a:focus {
color: #38255d;
}

[John EzraMember]

Hi there,

Thanks for writing in! It may be because your quotation marks in your CSS got reformatted during copy and paste. This causes a syntax error and is a reason why affected CSS won’t work. You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-breadcrumbs-wrap {
    background-image: url("http://clearwaterconferenceroom.com/wp-content/uploads/2016/03/pat_5.png");
}

I have included the code within a codes bracket so that it will retain its formatting, safe for copy and pasting directly to your custom CSS. If you copy and paste it into another location first, it may again get reformatted.

Note: I have test the above on your site and it works. Let us know how that goes. Hope this helps – thanks!

[piexecParticipant]

Thanks. That “kinda” worked.

http://clearwaterconferenceroom.com/index.php/booking/

I want the ENTIRE band with the page tile to use the pattern background. Not just the breadcrumbs area. See link above.

[NicoModerator]

Hi There,

Add this in your customizer’s custom CSS:

.x-header-landmark {
   background-image: url("http://clearwaterconferenceroom.com/wp-content/uploads/2016/03/pat_5.png");
}

Hope it helps.

Let us know how it goes.

Thanks.

[Author]

Posts