Page row transparency

Hi there

Great theme, went pro yesterday!

having a small issue tho with the row background image, i want to be able to change the transparency level of the background so i can see the image more clearly, i have changed the colour in the customise - colours - rows overlay but i can’t set the transparency setting

any help will be greatly appreciated

Kind regards
Liam Reed


There is no transparency setting. Nobody requested it so far :slight_smile:
You can use a custom CSS plugin and add this in it:

.overlay {
     opacity: 0.7;

Then you can change 0.7 to a value between 0 and 1.

Thank you so much, and so simple!

I’m also interested in having row background images display clearly in my Sydney Pro Theme as they automatically look darker when I place them there.

could you please define “You can use a custom CSS plugin and add this in it:”

How/where do I go about doing this?

Is there a way to bring transparency to 0 through the Row Styles menu?

Please advise. Many thanks.

Following Up: I installed Simple Custom CSS and had a look.

I want the background image to appear clear on one Row (the first Row) of the Front Page. Everything else should remain as is. How do I do this?

@Bellerophon: post a link to your site please. I’ll need to see the ID of your first row in order to modify the code I posted above.

Hi Vlad, thanks for your prompt reply. Unfortunately the site’s not launched yet. I would be glad to send you login details for this one. To which address please? Many thanks.

And, would I need to re-do this modification you mentioned each time I update the theme?



No, that’s the point of using custom CSS plugins: so you can do customizations that require some extra code without losing your changes when you update the theme.

That’s great then. Thanks. U got mail.

I added the code in your CSS plugin. Please remember to delete the account you made for me.

Thanks a ton, looks great & user deleted. Any way to control transparency other than on/off?

Yeap, delete background: transparent; and add instead opacity: 0.5; with values from 0 to 1.

Great, thank you Vlad!

One last question I haven’t found an answer for in the support forum.

I assign an image to the background of a row (dimensions 1920 × 400).

However, it always scales larger than the size of the row (the image gets stretched and is “displaced”) -which also has an effect to its quality.

This is also happening when Row Styles are set to “Full Width” and basically with every Row Styles setting.

What can I do so that I can assign an image that fits the whole row and can work good “responsive”? Many thanks in advance.

Well, the size of your image won’t be the same as the size of your row. Not across all devices anyway. The images are set to cover the whole row so it will get cropped on sides in order to assure that the whole row is covered.
So in your case you’ll probably need a bigger height for your image. Would be cool if this could be done in a different way, but geometry cannot be ignored.

Thanks @Vlad, I know what you mean, this user however claims he found a way out of this. Don’t know if its only by resizing the image to “fit” for different devices.

@WeAreOne (a couple of posts below) wanted to give me a hand with this. Shall I follow from there or open a new topic? I really want to take the best out of images on those rows and need to understand how to do it in order to have them display descent on all devices. Many thanks.

He probably figured out what the best image size is for that specific’s row height. Doesn’t mean it’s optimal across screen sizes.

It’s like this, and I’m just stating what’s possible to do in CSS here, it’s not really related to the theme:

  • cover mode: image fills up the entire row, regardless of size and thus gets cropped. This is how we do it because the next two options don’t make sense for what we’re trying to achieve.
  • contain mode: the image fills up the row on only one axis. Obviously, the row won’t be filled in full but the image will be fully responsive.
  • original: the exact size of the image. Doesn’t fill up the row on either axis.

These are the options. Cover is the best deal as long as the image isn’t something you need to see in full.
If the image needs to be seen in full then probably a background image is not what you’re after and you just need to insert an image in one of your rows.

This is stellar support! Thanks Vlad. It seems to be a geometry issue to have images display “properly” on all screens. i.e. a 1920 pixels width image is looking cheesy on my 27" monitor, looks better on a 13" monitor and best on my iPhone. What I don’t really understand (yet) is the connection of the image size. What would be your guess? Smaller image width?

I got a video loop playing in the background of my front page so inserting an image in one of my rows (while not being able to have it seen full width) is not really looking good. I tried that. Thanks again for your time and support.

Hi Vlad, getting back to you on this as I still face this issue. I use Polylang which works very nice with Sydney so far.

How do I do the same thing we communicated here (custom CSS for Row Transparency on my second language Front Page Row).

How do I find the ID of my Second Language rows in order to modify the code you kindly posted here?

Many thanks.


Can you re-email me access to your site please? I’ll need to see what the ID is.

Done Vlad, thank you.