Can't center my header image in Intergalactic theme

  • Unknown's avatar
    hageshii01 · Member ·

    I’ve spent the last few hours tinkering with the Customize CSS function on my blog. I’m trying very unsuccessfully to center my header image appropriately.

    I was running into problems with the header. On most PCs, like at work or my laptop I could upload my headers and they’d display generally perfectly fine. However, my home PC has a 1920×1080 resolution screen. And when I’d try to view the blog on that PC the header would be at a noticeably lower quality. I realized that the images I was uploading had a width of 1440px and that the blog would increase the size of the image to meet the 1920 of my screen (and in so doing noticeably decrease quality). Of course I don’t want this to happen.

    The first thing I tried was to upload higher-resolution images, but when you try to use any of those images in the header the Customizer will force you to crop them to 1440. So that didn’t work.

    Then I thought that maybe I could just center the images on the header with a fixed size. That way the image will be the same size no matter what screen it is displayed on. However, after hours of Googling and reading these forums none of the suggestions that people have put forth have worked. Not one bit of code would move the image to the center. Setting margin to 0 auto or auto didn’t work. Setting margin-left and margin-right to 0 auto or auto didn’t work. Even if I’d use display: block as well. And changing position to anything except absolute will seemingly just make the header image disappear entirely (or perhaps go off the page; I’m not sure). I’m using Google Chrome’s inspect element function to try to find some clues, but it hasn’t turned anything up yet. What I *have* been able to do is change the margin-left value under #header-background. That does move the image to the center if I use about 150px. However, I know that on a different computer with a different resolution those 150px will move it to a different position instead of the center (at least this is my understanding), so that won’t work. I’m at my wits end with this issue and I have no idea how to go about fixing this.

    I have basically zero CSS knowledge or skill, though I already figured out how to change the opacity of the header image so that it is completely opaque, and changed the size of the image so that it is a bit smaller. As such I have the following code in my CSS Customizer already. 

    .header-background {
	opacity: 1;
	width: 1000px;
}

    It’s possible that part of my mistake is that I don’t know where to put the other values to center the image if it falls under a different category.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    dannywellman · Member ·

    Hello there!

    I’m not sure if this will totally work for you, but here you go. :)

    .header-background {
    width: 1440px;
    margin: auto;
    left:0; right:0;
    }

    You can see the effects on my test site. The reason why I’m not sure if it’s what you want, is that it locks in the header size at 1440px no matter the screen resolution. On smaller resolutions, it just displays part of the image. However, that’s the only way I can get it to work (so far). I’ll keep messing with it, but I’d thought I’d pass on what I’ve found so far to see if it will help you out!

    Let me know if it works for you, please!

    Have a good evening!

  • Unknown's avatar
    hageshii01 · Member ·

    This is awesome! That looks like it worked! Thank you so much! I’ll have to double-check it on my desktop on Monday to be 100% sure but already the image moved from the left to the center on this laptop, so I do believe it’s correct.

  • Unknown's avatar
    dannywellman · Member ·

    Excellent!

    Have a great day!

  • Unknown's avatar
    foradcamp · Member ·

    Hi there! I’m also working with Intergalactic free theme on this blog:
    https://foradcampexhibition.wordpress.com/

    I’m trying to solve:
    1) How to remove the opacity of the header picture, to see it as it is, without this “white” film.
    2) How to make the picture fit in the screen. I’m working with this header picture (1440×460 px)
    https://foradcampexhibition.files.wordpress.com/2015/04/fdc15-blog.gif
    but it keeps cropping the image

    Thanks!

  • Unknown's avatar
    jeremeylduvall · Member ·

    @foradcamp,

    Please open a new forum thread for these issues. You can do that from the link here:

    https://en.forums.wordpress.com/?new=1

    Just a note, to make the customizations you’re looking for, you’ll need to purchase the Premium bundle shown here to have access to the Custom Design upgrade:

    WordPress.com Premium [Redirects to Plans]

  • The topic ‘Can't center my header image in Intergalactic theme’ is closed to new replies.