Background image

Hi,
I need some help with the background image, whenever I put a background image on, there’s a layer (overlay) on top of it, how can I remove that, I would like the image to display with proper color? thanks.
Regards,
Raymond

Hello Raymond,

I will be glad to help you, but can you please provide some explanatory screenshots with a link to the relevant page on your website to let me inspect it?

Kind Regards, Roman.

Hi,

My website is http://sample02.rswedding.com.au/ , I would like “The Groom and Bride” background image (the bridge) shows the actual image color, and the information with in the pink wrap with a see through white. (an example of this will be like the link here, http://www.w3schools.com/css/css_image_transparency.asp , EXAMPLE 3 - Text in Transparent Box.

However I would like the “event” background image to stay the same with the overlay white. Please help.

Regards,
Raymond

Hello Raymond,

Thank you for very clear explanation.

Please try to use the following CSS code.

You can add CSS code to your site with Simple Custom CSS plugin (just copy CSS code and paste it in Dashboard -> Appearance -> Custom CSS after installing and activating the plugin). Also you can add CSS code directly to style.css file of your child theme.

#pg-10-0 .overlay {
    display: none;
}

#pg-w56e24d0f5d73c-0 .panel-row-style {
    background: rgba(255, 255, 255, 0.6);
}

Here I can see that you have applied the following CSS rule. Please consider removing/modifying it to make the font visible.

#pg-10-0 {
    color: white;
}

Kind Regards, Roman.

Hi Roman,

Thank you for your help, this is exactly what I wanted.

I just have one more issue if you don’t mind to help. On my other website I’m trying to achieve the same thing, however when I add in the CSS it didn’t quite work. http://sample06.rswedding.com.au/ , I tried different Classes and IDs combination, but it’s not showing me what I wanted (The grey area is what I wanted to be see through and have a white layer on it, currently what’s on the website, it’s not what I wanted).

I looked it up online for a few hours, and it’s still doesn’t make any sense, are you able to explain it to me if it’s not too much trouble.

Regards,
Raymond

Hello Raymond,

Please try to use this CSS code for other site:

#pg-w56dfa1148e9c5-0 .panel-row-style {
    background-color: rgba(255, 255, 255, 0.6) !important;
}

I used an id of parent div, because the div that you want to change background color in doesn’t have something specific to target.

I hope that it will help you to understand it.

Kind Regards, Roman.

Hi Roman,

All good, thanks for your help.

Regards,

Raymond

You are welcome Raymond,

And have a nice day :slight_smile:

Kind Regards, Roman.

Hi Roman,
Another problem I come across with the background image, the image is not showing the whole thing when my browser is max, however when I make it smaller the image shows it all. Is it possible to make the background to show the whole image no matter what size it is? (the image should be able to re-size accordingly right?!)
Link is here http://blog.rnsenjoylife.com/index.php/about/
Thanks for your help.
Raymond

Yes Raymond, I can see the issue.

However, I kindly suggest you to contact Page Builder by SiteOrigin support here or here.

They should know about their own plugin much more than we do :slight_smile:

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi Roman,

Thanks I will contact them regarding to that issue.

  1. For my site http://blog.rnsenjoylife.com , how can I disable the nav menu to a mobile verison, I want the nav menu to display like normal regarding to the size.

  2. Or what is the code to manage that will change it to the mobile menu after a certain size depend on the browser.

  3. Once my browsing window gone smaller, my photos won’t re-size accordingly.

  4. When my browser gone smaller, the footer area won’t go all the way to the end, there will be white part on the right hand side of the window, how can I fix that.

Regards,

Raymond

Hello Raymond,

1 and 2. Menu in Sydney theme is complicated and uses JavaScript. It is possible to make those changes, but this requires some coding and testing, so it goes beyond our support policy. It’s considered advanced customization.

As an option, you can contact Codeable for this kind of service, or find a freelancer on Upwork.

  1. Here I can see that you have applied the following CSS rule with Simple Custom CSS. Please remove it and your images will be responsive again.
/* frontpage post photo size */
.content-area .entry-thumb img {
    max-width: 600px;
    max-height: 500px;
}
  1. Your footer looks fine to me, did you fix it already?

Kind Regards, Roman.

Hello
Please tell me the naming of the photo gallery plugin on this website http://sample02.rswedding.com.au/

Hello @malibu75,

Looks like it is Envira Gallery.

And here is their website.

Kind Regards, Roman.

Thank you so much, Roman.

You are welcome @malibu75,

And have a nice day :slight_smile:

Kind Regards, Roman.

Hi Roman,
Thanks for the information.

For my number 3 question, if I removed the css for /* frontpage post photo size */, the pictures display are too big and I do not like it, is there another way to modify it?

For my number 4 question, no I have not fix it. If you minimize it to like a mobile screen, you can see that the the picture is going across the page but the footer is not.

Regards,
Raymond

Hello Raymond,

  1. Then please replace your current custom CSS rule with this one:
.content-area .entry-thumb img {
    max-width: 600px;
    max-height: 500px;
    width: 100%;
}
  1. Can you please provide some explanatory screenshots?

Kind Regards, Roman.

Hi Roman,

That fixed the problem, with that CSS rule, it fixes question 4 issue too.

Can I ask what did that “width:100%” do to fix it? in what situation would you use it.

Thanks a lot.

Regards,

Raymond

Hello Raymond,

The width property was not specified for that images.

Now, max-width: 600px; and width: 100%; rules “tell” pictures to be 100% of width (in its container) but not more than 600px.

Kind Regards, Roman.