CSS for Background image opacity

Support
#1

Hi, I am using CSS to change the BG image on individual pages.

This is the code and it works:
body {
background: #fafafa url(path/filename.jpg) center center no-repeat !important;
-webkit-background-size: cover !important;
background-size: cover !important;
}

However, I want to apply an alpha to the BG image. When the image as set in X options and was the same for all pages, this CSS worked to make the BG image have an alpha:

body .backstretch {
opacity: 0.5 !important;
filter: alpha(opacity=50) !important; /* For IE8 and earlier */
}

but now that I am setting the BG image in CSS this code doesn’t work so there must be a different CSS selector I need to use … can I have it, please.

Thx

#2

Hello @kirk74,

Thank you for posting in!

This css code will only work when you use the Theme option’s background image option:

body .backstretch {
  opacity: 0.5 !important;
  filter: alpha(opacity=50) !important; /* For IE8 and earlier */
}

And if you do no use the theme options background image option, this css will work applying a background image into the body element.

body {
background: #fafafa url(path/filename.jpg) center center no-repeat !important;
  -webkit-background-size: cover !important;
  background-size: cover !important;
}

With this code, applying opacity is not possible. You will need to modify the css code instead. Perhaps this link will enlighten you:

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Hope this helps.

#3

Thx I wil play around.

Something else I have noticed. One just the homepage, the BG image is zoomed in and not filling the space the way it normally would … so there must be other code conflicting on the homepage. Any ideas how I shoudl tweak this code kn the homepage so that it doesn’t zoom in:

body {
background: #fafafa url(path/filename.jpg) center center no-repeat !important;
-webkit-background-size: cover !important;
background-size: cover !important;
}

#4

Hello @kirk74,

The zoomed in or image cut off in the background image is because of the size property. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

For you code, you can play around with background-size: cover !important;, background-size: contain !important; or background-size: 100% auto !important;.

Hope this helps.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.