Jump to content

Feature background

Recommended Posts


I've been trying to find a way to make the feature background transparent or white on a website. Here's an example of one of the pages: http://drtanyapeters.com/home-page-test/


I'd like the background behind the photo and text to be all white.


I've tried using this bit of code I saw in other answers to this question:


#site .section-features .fcontent {
background: transparent;
But it hasn't done a thing. Running most recent version of Pagelines and WP.

Share this post

Link to post
Share on other sites

Are you looking at the sections below? There is a background image attached that is affecting the background.


#feature_slider #feature-area


#feature_slider .fcontainer.fstyle-lightbg .fcontent

  • Like 1

Mackenzie - PageLines Help Desk

The Centsible Family - Writer, Photographer and Coffee Addict


Kindly search this forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

Share this post

Link to post
Share on other sites

If you apply background-color: transparent; or background: transparent; to #feature_slider .fmedia, #feature_slider .fcontent  you'll see it remains dark grey. It's picking up the color from some other level. However, if you make it background-color: #ffffff;   or background: white; it turns the background behind the person's image, white.

  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post
Share on other sites

I played around with it based on the advice above, and this ultimately fixed it for me:


#feature_slider .fmedia {
background: #ffffff;
#feature_slider .fstyle-lightbg {
background: #ffffff;






The first bit takes out the border behind the photo, the second takes it out from behind the text.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • nandorj78
      By nandorj78+
      I'd like to request a section (or that this could be enabled on the background settings of the existing sections) in which we could set a image to stay fixed, just as we can see in the link below:
      http://www.bootply.com/render/100702 (you can see 2 different background images and everything scrolls on top of it.)
      Is it possible to be done without having to code it via CSS every time?
    • jacobtippett
      By jacobtippett+
      I am trying to get the background image of the Revslider to be clickable and redirect to a link.
      Does anyone know how this is possible?
    • jagipson
      By jagipson+
      I am trying to make a header like the following site: http://www.nd.edu/
      They have their logo with a blue and yellow bar. Above the blue bar its actually transparent. You can see the image underneath of the building. How can I accomplish this with the Fixed section on DMS? I just started the build here:  http://recruiterwebsitedesign.com/polymer/
      When I scroll down the bar in transparent but the top is white which looks like its the site wrap background. How can accomplish this?
    • martinjrob
      By martinjrob+
      I am having problems in figuring out how to make the sections transparent so it shows 1 background color, Image.
      I have made all sections with no background colour as it suggests in pagelines docs
      this is the domain name http://www.socialwebservice.co.uk/ and this is how i would like it to look http://ecologysurveysinnorfolk.co.uk/
      Any help will be much appreciated. 
    • abuzzelli
      By abuzzelli+
      Trying to adjust the position of the background image on http://churchofwolves.com/. I need the wolf background to move over to the left on mobile versions so it can be seen. Here's the code I'm using and it's not working. I've tried a bunch of different things. Getting frustrated. Any advice?
      @media (max-width: 768px) { .home .site-wrap{ background: url(http://churchofwolves.com/wp-content/uploads/2015/06/Church-of-Wolves-bkgd1.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: 100% 0%; } }