Need help? Check out our Support site, then

centring my home page photo

  1. I am ready to take a new photo for my home page. But I am having issues with how the photo is portrayed on different screen sizes. On my 27 inch screen I get the full picture. On my work computer (a regular sized screen) it zooms in on the top left corner of the picture. I would like to put up a new picture but don't want to see just the top left corner of it on regular screens. Is there a way to get it not to zoom on smaller screens? And if that is impossible, is there a way to just have it zoom to the centre of the pic?

    The blog I need help with is

  2. I'm trying to get this photo to always look like this: on any screen. And not just show the left chunk of sky on smaller screens. Any tip would help!

  3. if it helps, this is the full picture of my home page (which can be seen in full on a 27 inch monitor)

  4. You've added this:

    body.home {
        background: url("") no-repeat scroll 0 0 transparent;

    This means position the image at the top left corner of the browser window, and display it in its original size. So the lower the screen resolution, the smaller the part of the image that will show. To display all of it no matter what the (desktop or laptop) screen, you need to force a relative width. Turn this:
    0 0
    to this:
    0 0 / 100% auto

    But this will probably be wrong on narrow mobile devices, so ideally you should add a media query to limit it to screens of a certain minimum width, and think of a different solution for mobile devices.

    In the future make sure you post CSS questions in the CSS forum, not the Support forum.

  5. Thanks justpi, and I apologize for having it in the wrong forum. Will this leave any blank space if the photos dimensions don't fit the screen perfectly?
    And excuse my ignorance, but do you have any suggestions on how to do the media query?

    Thanks again.

    Oh, and are there spaces in the 0 0 / 100% auto?

  6. oh, and does the word transparent stay?

  7. Should it look like this?
    background: url('') no-repeat scroll 0 0 / 100% auto transparent;

  8. You're welcome.

    a) Yes, you just replace the two zeros with the bit I suggested:

    body.home {
        background: url("") no-repeat scroll 0 0 / 100% auto transparent;

    (Or with a color code instead of the word transparent - see end of #c below).

    b) I know how to do a media query, but I don't know where I should set the limit (or what other options might be better) because I don't have direct experience with mobile devices. So you probably have to wait for a staff reply on this.

    c) Your image has reasonable proportions, but screens vary in proportions, so there's no way to ensure that a non-repeated image won't leave any blank space no matter what the screen (except if you force 100% width plus 100% height - but this would make the image ok in some screens and distorted in others). That's why it's better not to set the bg image the way you've set it: the best solution would be position top center instead of top left, with an image that fades to a uniform color (black or grey in your case) left, right and bottom, and the same color set as a background color to the blog (so that it's seen as a continuation of the image instead of blank space).

  9. Thanks again justpi. Unfortunately what you suggested just removed my image, and I couldn't get it back until I went back to the original formula. I really would prefer forcing the 100% height and width, mostly because most screens have similar dimensions, and mobile devices have a special presentation for my site. Do you have any idea how to do 100% height and width.
    I'm not sure why the first suggestion didn't work, shouldn't something be typed in different?

  10. You probably omitted something while copypasting: what I suggested is your original formula (I actually copied it from your CSS when I examined your page) - the only difference is the 100% I added.

    For full width and height, you replace "auto" with "100%":

    body.home {
    background: url("") no-repeat scroll 0 0 / 100% 100% transparent;
  11. I've tried it now multiple times and it only takes away my original picture and replaces it with the default background. Not sure what I am doing wrong. But thank you very much for your help.

  12. Ah yes, you're right. This didn't make sense, so I temporarily switched one of my blogs to Chunk and tried it live (I have the upgrade on that blog), and I got the same problem: showed in the preview, no show on the blog. This must be a glitch with the new CSS editor: other users have also been complaining that their changes don't save.
    Then I thought of trying the detailed version of the code instead of the shorthand, and it worked. So try this and see if you're luckier:

    body.home {
    background-color: transparent;
    background-position:0 0;
    background-size:100% 100%;

    I also noticed something else: your homepage is longer than the browser window, so when the image is set to 100% height you'll see blank space when you scroll down. So you need to use "fixed" instead of "scroll", or edit the Archives widget and select the option "Display as dropdown".

  13. Yes!! It worked. You are a genius, sir. Thank you very much for your efforts. And since you are familiar with my case, I was wondering if I can ask you a question. How do I remove Archives and Recent Posts from my home page?

  14. You're welcome.

    You mean remove it from the homepage but not from the other pages? You don't need CSS for that: you go to Appearance > Widgets, open the widget, click Visibility, set the three pulldowns to Hide if Page is > [the page you've set as your front], click Save.

  15. Thanks again. When I select Page it doesn't allow me to fill in the next cell. I'm not sure why, but I will try it later on my home computer.

  16. To clarify, when I select "hide if", then "Page" the next cell doesn't free up the drop down or let me fill in manually.

    Sorry, one more question if you are still willing to answer! I want to remove the tagline on the home page "finding the best new music" and have the menu bar raised up to where the tagline is. Is that possible?

  17. a) The third pulldown takes some time to load. If it won't load for you, you probably have a browser issue. What browser and version are you using?

    b) To remove the tagline, add this:

    #site-description {
        display: none;

    PS Don't post all your questions in the same thread: for a different question start a new thread.

  18. Sorry about that, I will ask a new question on a new thread. But I do have a question about the code you put up. It removed my tagline from all my pages. How do I write the code to just remove it from my home page?

  19. Ah sorry, I didn't realize you meant remove it from the homepage only. Turn the first line of the above code to this:
    .home #site-description {

    By the way, the reason I didn't realize what you were actually asking is that tagline on other pages but no tagline on the homepage seems bizarre to me (I can understand the opposite but I don't see the point of this).

Topic Closed

This topic has been closed to new replies.

About this Topic