Custom CSS for opaque site title

Site URL: https://www.studio-smiths.com

I'm using Zion template on version 7.1 - 

Is there any way of having the site title header with a reduced opacity (maybe 50%) on the home page (in desktop view) only? 

Also, is there any way of making a homepage image on mobile view mobile more centred or reduce the size of the image when on a mobile device only so you can see more of the background image? We seem to be having issues with moving our focal point when editing. 

Lastly, when we add an additional code to custom CSS do we just add it underneath any previous codes we have placed on there? 

Q1. You mean site title or header?

Q2. If resize, gray space will appear

Q3. Correct

Hi Tuanphan, 

Oops, I think I mean site header! 

Is there any way of having the site header with a reduced opacity (maybe 50%) on the home page (in desktop view) only? 

So that the image is seen all the way to the top of the page with the header sitting across the top in an opacity of 50%. 

On 5/29/2021 at 11:47 PM, Courtney88 said:

Hi Tuanphan, 

 

Oops, I think I mean site header! 

Is there any way of having the site header with a reduced opacity (maybe 50%) on the home page (in desktop view) only? 

So that the image is seen all the way to the top of the page with the header sitting across the top in an opacity of 50%. 

 

 

Add to Design > Custom CSS

/* desktop-homepage-header opacity */
@media screen and (min-width:992px) {
body.homepage header#header {
    background: rgba(255,255,255,0.5) !important;
}
}