Right-align text and image stack in a responsive environment

Question

I am trying to stack a logo with the right-aligned site title and tagline in a full-width header that has a background image. This would be relatively simple to do in an html module, but I would like to do it in a header module if possible (so the client can change the background image easily). The problem is that the logo does not remain right-aligned with the title and tagline but moves horizontally as the window size and zoom levels change. I've attached a two images, labelled desired and mis-aligned showing the problem.

I've been trying to do this with the ::before pseudo class: Is it possible stack a logo, site title, and site tagline and have them all right align? I am trying to stack a logo with the right-aligned site title and tagline in a full-width header that has a background image. The problem is that the logo does not remain right-aligned with the title and tagline but moves horizontally as the window size and zoom levels change.

I've been trying to do this with the ::before pseudo class:

.site-title::before {    
    content: "";
    background: url("http://www.acchs.edu/2014b/wp-content/uploads/ACCHS_Transparent-150x146.png")     
    no-repeat;
    display: block;
    clear: both;
    width: 150px;
    height: 150px;
    right: 150px;
    position: absolute;
    top: 0px;
    margin-top: 90px;
    margin-bottom: 0px;
}

Answer 1

I don't really see the point of using ::before for this, as you could just put the logo in the HTML as an image above the h1. Anyhow, you can easily do this with :befre by giving the h1 position: relative so that the ::before content is positioned relative to the h1.Then you just adjust the logo's positioning. E.g.

h1 {
    position: relative; 
    margin-top: 0; 
    padding-top: 130px;
}
.site-title::before {
    content: "";
    background: url("http://www.acchs.edu/2014b/wp-content/uploads/ACCHS_Transparent-150x146.png") no-repeat;
    width: 150px;
    height: 150px;
    position: absolute;
    top: 0;
    right: 0;
    margin:0;
}