[Resolved] adding background to content page, and make content text standout

[Nam Nguyen]

Hi support,

I want to add a background image to a content area of a page, and I can use the following CSS

.page-id-27 .inside-article {
background-image : url(‘http://clubtinytots.com.au/wp-content/uploads/2015/08/happy-birthday-background.jpg’);
background-size : cover;
background-repeat: no-repeat;
}

However, I wanted the background image to fade into the background so the content text stands out and readable. I thought I could add opacity, however, opacity also affects the texts as well.

Is there a way to add opacity to the background image through CSS (without having to edit the iamge through photoshop/canva). OR is there a way to make the content texts stand out?

Thanks
Nam

[Tom]

Hi Nam,

I don’t think there’s any way to fade out a background image without doing it directly to the image.

Using opacity in CSS will affect everything within the container as well.

[Author]

Posts