No opacity in mobile header twenty fifteen

The background image and it’s opacity, are added to the page in a very unconventional way:

@media screen and (min-width: 59.6875em) {
body:before {
    background-image: url(https://seattlesmarty.com/wp-content/uploads/2015/08/header-smarty-in-traffic.jpg);
    background-repeat: no-repeat;
    background-position: 100% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    border-right: 0;
}
}

body:before {
    opacity: 0.3;
}

As you can see from the first part, that image is only there on larger screens.

For smaller screens, you see an image as the background of the header — which is an entirely different block.

You can’t really use the same effect on that. For larger screens, the background is added by adding an item to the page with a certain opacity, but for smaller screens, the background is just an image to an existing element.

Makes sense I hope?

Thanks Mark. That part makes sense. But how then would you target the opacity of the same image in the different block for smaller screens? “..but for smaller screens, the background is just an image to an existing element.” Or is that possible?