How to change background image opacity/transparency?

[mcbigwhite]

Hi, i want to add a fixed background image to my website- brunch pro theme, but when i do i then can't read most of the text/content and so i need the background image to be far less visible. Ideally still bright on the either side of the page where there is no content but in the middle section far less visible.

http://www.fishing4tackle.com

[emasai]

Here is a tutorial on how to achieve this https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity

You can also add a text shadow in css to the text to make it more visible over an image, but that really doesn't look too good if there is a lot of text.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[mcbigwhite]

Thanks for the reply, i read through it but unfortunately that tutorial is nowhere near explained clearly enough for a beginner like me.

[mcbigwhite]

Can anybody explain clearly please, from the link above i have no idea where i should be writing in code on my site.

[emasai]

The tutorial is pretty well explained with Code Pens illustrating how. Basically HTML goes onto your page (in Text view) and CSS goes into your style.css file.

If this is too complicated you could try reducing the opacity of your image in a photo editing program, before adding it to your website.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[Andykev]

.site-container {
background-image: url(http://www.fishing4tackle.com/wp-content/uploads/2016/09/underwater-view-of-wave-dave-fleetham-768x511.jpg);
opacity: .6;
margin: 0 auto;
}

The above is a "basic" example of adding a background image to your website. I pulled an image out of your file and used it for this example. Your image can be a repeating pattern which will "tile", or you can use a properly sized image to fit this particular container as your website is designed.

You can also use a solid color. To "blend" the color or the image, you will need to use a gradient to make the color dark on edges and fade to light in the midddle

https://css-tricks.com/css3-gradients/

[Author]

Posts