Home>Support>How to adjust an image [position for the feature image/site header.

How to adjust an image [position for the feature image/site header.

By josephgmedia, 2 years ago. Last reply by Andrew Misplon, 2 years ago.

This is my site. I’d ideally like to keep the header size 950px across all my pages and adjust where the feature image is positioned because at the moment it is top aligned. I’ve tried targeting and changing these images with CSS but nothing seems to be responding. Is there a way to have the image centered within the 950px container? Or base aligned?

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 2 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Hi Joseph

    Thanks for reaching out.

    I’m, unfortunately, not quite following your question. Your header width is 1200px. The image that makes up your header background is full-screen. The image is currently centered. Can you perhaps describe what you mean by base aligned?

  2. 2 years, 7 months ago josephgmedia

    Hi Andrew,

    Sorry if I was unclear, I think this page may better show what I’m describing. As you can see, the text is cut off due to the responsive nature of the builder. I’m viewing this on a 4K screen, which I’m not sure everyone will be but it would be good to find a way that the header image will show the text. If that makes sense?

  3. 2 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Hi Joseph

    Thanks for the update.

    Ideally, theme support would lend a hand with the page in question. The image is being loaded and styled by the theme’s stylesheet.

    header.entry-header.main {
    background: url(https://southernpictures.com.au/wp-content/uploads/2019/11/SilentNoMore_Layout_A4_02.jpg);
}

    The image uses background size cover. https://www.w3schools.com/cssref/css3_pr_background-size.asp

    If you’ve worked with Custom CSS in the past you could target the above selector with https://www.w3schools.com/cssref/pr_background-position.asp. If you wanted even more control you could combine media queries with different background position values https://www.w3schools.com/css/css_rwd_mediaqueries.asp.

  4. 2 years, 7 months ago josephgmedia

    Hi Andrew,

    Thanks so much for the point in the right direction. I have done a bit of custom css with this site, wouldn’t call myself a guru but hopefully I can work out what I need to with those links – if not I’ll reach out to theme support.

    I have had to use the site origin custom css extension as every time I try to use the WordPress customiser, I get a fatal error. I can only use it if
    I disable site origin page builder – that may come your way in another ticket though. You’re a great help, thanks mate.

  5. 2 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Hi Joe

    Thanks for the update.

    If you could let us know what the fatal error is, that would be great. You can do so by enabling WP_DEBUG and WP_DEBUG_LOG in your WordPress wp-config.php file. When you’re done you can set WP_DEBUG to false.

    https://codex.wordpress.org/WP_DEBUG
    https://www.wpbeginner.com/wp-tutorials/how-to-set-up-wordpress-error-logs-in-wp-config/

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More