Getting header image to justify left or right

[rsviki]

Hello there Weebly community, 

I am building a website for a charity improv festival that we are doing. Here's the URL:

lemanapalooza.weebly.com

Our designer made a beautiful header image that includes the name of the festival. This means that I would like the header to left-justify at all times.

I was able to do this in "code inspection" in Chrome by changing the x variable of background-position to 0%, but I searched everywhere in the CSS and couldn't find "background-position" anywhere.

Has anyone successfully left- (or right-)aligned a header image in Weebly before? I would very much appreciate guidance.

[Adam7]

If you don't see it within the CSS files, you can still override it by adding your own rules. There are two ways to go about this. If you've already customized your theme, just add the new rule to the bottom of main.less (or main-style.css, depending on your theme), e.g.

.header-image-example
{
 background-position: 0% !important;
}

If you haven't customized your theme, you can wrap it in <style> tags and add it to Settings > SEO > Header Code, like this:

<style>
	.header-image-example
	{
		background-position: 0% !important;
	}
</style>

Adding "!important" just helps prevent any other later rules from potentially overriding it.

[rsviki]

Thank you for the reply, @Adam. I am really excited that you replied!

However, inserting this code doesn't change the header alignment. The header still centers itself AND there is an unwanted side effect: the code prevents the header from shrinking when I make the screen smaller.

(When I inspect the code it still shows 50% 50% even with the change.)

I've left the change published for now so you can take a look.

Thank you!

Viki

[Adam7]

Oh, I forgot to mention you would need to update the class used by my example. Try this code, it's using the class from your live site:

div.wsite-section.wsite-header-section.wsite-section-bg-image
{
 background-position: 0% !important;
}

[rsviki]

Thanks again for the quick reply, @Adam. I tried to do as you said but it still didn't work. Any other ideas? Might there be another !important somewhere overriding this one?

And the new problem of responsiveness persists: for now, I've removed all the extra code that we've been experimenting with, and the image doesn't shrinks when I decrease the width of the browser window. Beforehand it used to shrink and not just center.

[rsviki]

In case anyone else is trying to figure this out, I was not able to fix this. Because adding the code broke the responsiveness (and did not left align the header image), I had to create a copy of the site and re-apply the basic theme. By then I was so happy that the header was responsive again that I just accepted it wouldn't left align.

It's a shame that it isn't possible to left (or right) align a header image in Weebly.