My header image is not centering

Weebly can override theme styling codes. When this happens, some aspect of the theme may change like how the header image is positioned. This tutorial will show you how to override Weebly’s change to center your header image again.

1) Click here to open your Weebly Editor

2) Click into “design” then into “edit html/css”

3) Click into “main_style.css”

4) Here locate these set of codes:

#landing-header-image.wsite-background { background: url('landing_header.jpg'); height: 650px; }
#dd-header-image.wsite-background { background: url('dd_header.jpg'); height: auto; min-height: 300px; }
#video-header-image.wsite-background { background: url('dd_header.jpg'); height: auto; min-height: 400px; }
#tall-header-image.wsite-header { background: url('tall_header.jpg'); height: 480px;}
#short-header-image.wsite-header { background: url('short_header.jpg'); height: 350px; }

5) Here add the codes highlighted below:

#landing-header-image.wsite-background { background: url('landing_header.jpg'); height: 650px; background-position: 50% 0 !important; }
#dd-header-image.wsite-background { background: url('dd_header.jpg'); height: auto; min-height: 300px; background-position: 50% 0 !important; }
#video-header-image.wsite-background { background: url('dd_header.jpg'); height: auto; min-height: 400px; background-position: 50% 0 !important; }
#tall-header-image.wsite-header { background: url('tall_header.jpg'); height: 480px; background-position: 50% 0 !important;}
#short-header-image.wsite-header { background: url('short_header.jpg'); height: 350px; background-position: 50% 0 !important; }

6) Save your change and re-publish your website

Tags: , , , , ,