Change background of featured pages area

You have to set the .round-div border color

Hi, try these two css codes below, one of the two may work, let me know if this helps!

.home {
background: transparent;
}

OR

.home .thumb-wrapper {
background: transparent;
}

d4z_c0nf said: set .round-div

That works – for colors at least.
So: .round-div { border: 104px solid #cec; } when the body has same color looks great – and the round transitions work too.
So for anyone using a solid color for their background – they should be all set using this fix.

I’m trying to use a texture image, not sure if it is possible to use that and also get the transition effects.

Using border: 104px transparent; completely disables transitions and shows the image statically in a box.
So does border-image: url(texture.jpg) 0 0 repeat ;

(As for .home or .thumb-wrapper that does not work…)

OK, so tried a bit to make transitions work with a background image, but no luck.
Here’s the final code snippet: this uses a texture (image) as background, rounded image display, but no transition effect on hover.

body { background:     url(seamlesstexture.jpg) repeat  ; }
.navbar-inner { background:     url(seamlesstexture.jpg) repeat  ; }
.round-div { border-image: url(seamlesstexture.jpg) 0 0 repeat  ; }
.thumb-wrapper { border-radius: 900px; }

And the previous comment shows how to do the same for a solid color (and preserve the hover transition). Marking as resolved…

Just noticed that while this works great on desktop browsers, it looks pretty bad on mobile browsers – both Chrome and Firefox on Android.

Even using the simple solid color background, which preserves the hover animation on desktop, mobile phone browsers show all the featured post .round-div regions with a white background. Looks odd – correct background all over the page, except the three featured post links which show a white rectangle that contains the circular image of the featured post. Would have been nice if it looked like the desktop version and showed the same background color in round-div or thumb-wrapper parts of the page… and hover animation is useless/not enabled on the mobile browsers anyway, so maybe the CSS can be simplified a lot for smartphones….

Complete fix! Turns out .round-div has a more specific CSS for smaller media sizes, therefore using just .round-div will not work on tablets or smartphones.

This code below works on all media sizes:

body { background-color: #beb; }
/* have to set/reset entire background for navbar */
.navbar-inner { background: #beb ; }
/* use more-specific CSS to make round-div color apply at all screen sizes */
.widget-front .round-div { border-color: #beb; }

Hey bwooster,

Tried pasting this snippet into my site: https://www.terrturfsod.com to overcome the white squares around featured images issue and not having any luck. Any thoughts? I’m a complete newbie to web design/CSS/wordpress, etc. so go easy on me. ??

Hey cmchambers99 cannot access to your site.

Hi I was able to overcome mine using this

.round-div {
border-image: url(/wp-content/uploads/2014/03/dark_wood.png) 0 0 repeat ;
border-color: white;
radius-border: 30% }

.thumb-wrapper {
border-radius: 50px;
}

body {
background: url(/wp-content/uploads/2014/03/dark_wood.png);

https://beta.palmeospa.com

but it ain’t that round, looks kinda oblong. Is there any other way around this? The hover effect was lost with this snippet. Hopefully someone knows how to fix this issue with background texture instead of just a plain color.

Thanks

Whoops! Would help if I gave you the correct URL, eh? The site is https://www.terraturfsod.com (told you I’m a noob) Anyway, changed the image URL and tried your fix jfkc, didn’t seem to do anything on my site… Hopefully someone smarter than me can figure out the code to make those pesky white squares transparent.

cmchambers99, the problem is that you can’t have both border-radius and border-image for round-div (css “rule”, not customizr problem).
jkfc gave you a different solution, using border-image for the round-div, loosing the transition effect, but rounding the thumb-wrapper (which contains the round-div). Anyway to you jfkc’s solution isn’t working ’cause you have this in your custom css:

#menu {
	background-color:#FFFFFF;
.round-div {
border-image: url(/wp-content/uploads/2014/03/blades-of-grass.jpg) 0 0 repeat ;
border-color: white;
radius-border: 30% }

.thumb-wrapper {
border-radius: 50px;
}

You see? You missed the closing { for #menu, it should be:

#menu {
	background-color:#FFFFFF;
}
.round-div {
border-image: url(/wp-content/uploads/2014/03/blades-of-grass.jpg) 0 0 repeat ;
border-color: white;
radius-border: 30% }

.thumb-wrapper {
border-radius: 50px;
}

Hope this helps

As the previous comment says, can’t have both transition effect and background imgage for featured post images.

It is possible to keep the transition effect and use a color border for the featured page images and keep background image for the rest of the page (though I don’t have the exact CSS for now, will be a combination of things from previous comments).

Also be careful of your open and close braces { }. in addition to the #menu problem pointed out, the body CSS is also incomplete.

Finally – make sure you are testing your changes on smaller width windows. On desktop, resize your browser to a smaller width – to mimic a tablet, and a smartphone, approximately. customizr uses different CSS definitions for such widths, which is why you may need at least one more definition for .round-div as I use (shown in a previous comment).