Changing opacity for images

  • Resolved Trisha Cornelius

    (@trisha_cornelius)


    9 years, 8 months ago

    Hi,

    I am using the Genesis framework sample theme as a parent on . I have added support for a custom background and changed the .site-container opacity to 0.8 so that the background image can be seen under the content. So far so good. But, for content images I want the images not to be transparent at all.
    A page that demonstrates the problem is:https://www.bethedog.co.za/about-sam-walpole
    I have included the following css:

    .site-container {
	opacity: 0.8;
}

.site-container
.content img {
	opacity: 1 !important;
	background-color: #fff;
}

    (lines 1511 – 1519)
    but my content images are still transparent.

    Can any one help me out here?

    Thanks,
    Trish

Viewing 4 replies - 1 through 4 (of 4 total)

  • If you set the opacity of an element, the opacity is set for all of its children as well. try to use rgba instead.

    Example

    .site-container {
  background-color: rgba(250, 250, 250, 0.8);
}
    Sam

    (@soumendra)

    Hello Trish,

    You have added this:

    body {
    opacity: 0.8;
}

    Please remove that and add this in your Custom CSS:

    .nav-secondary {
    background-color: rgba(225, 225, 225, 0.8);
}
.sub-menu li a {
    background-color: rgba(225, 225, 225, 0.8) !important;
}
.content .entry {
    background-color: rgba(225, 225, 225, 0.8);
}
.sidebar .widget {
    background-color: rgba(225, 225, 225, 0.8);
}
.site-footer {
    background-color: rgba(225, 225, 225, 0.8);
}

    Hope that helps you, feel free to ask if there is any other problem.

    Thank you.

    Thread Starter Trisha Cornelius

    (@trisha_cornelius)

    Thank you so much guys! It worked perfectly and I will remember this in future.

    The WordPress community rocks!

    Sam

    (@soumendra)

    Pleasure to help you. ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Changing opacity for images’ is closed to new replies.