Two images in header, one left aligned and one right aligned

I’d like my header image to span the width of the window, but don’t necessarily want an image that is 1400px wide because when the screen/window is smaller, the image gets too small. See http://898.6bc.myftpupload.com/ for a sample of how the 1400px width image looks. I’d like to break the image into two and align one to the left of the screen and one to the right. So it would appear to take up the whole screen but the white space in between the images would shrink when then window gets smaller.

Hi there,

You will have to split the header image into two where the first image is the logo and the second will be the image on the right.

You can then set the first image as the logo and upload the second image in the media section and add this in the custom CSS:

.x-brand img {
    float: left;
}

.x-brand:after {
    content: url(URL_OF_THE_SECOND_IMAGE);
    float: right;
}

.masthead-stacked .x-brand {
    width: 100%;
}

Please note that what you are trying to do is not available out of the box in the theme but the suggestion I provided should get you started but you might need to add further customization for the code on mobile.

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