2017 Theme CSS .panel-image – Space above & below image

  • I have added the same featured image to the 4 pages on a Twenty Seventeen homepage. This works well except for unwanted space/padding/background, or whatever it’s called, both above and below the image. My featured images are all approx 2000W x 400H (probably not ideal, however I am using slices of frames from a video playing in the header i.e. I want the same width etc).

    I understand that the container size is obviously taller than my image, although I suspect that I should be able to use CSS to make adjustments without worrying about the actual container.

    So far I have:

    /* Panel Image */
.panel-image {
    height: 150px;
	background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: 100px;
    background-size: 100%;
    position: relative;
}

    If I use background-size: cover; ,the unwanted space/padding/background is removed, however the ends of the image are not displayed i.e. the image is effectively cropped or zoomed in on; I understand to fill the container.

    With another setting, which I cannot recall, I managed to see the entire image, however it was duplicated to fill the space i.e. one image below the other, even though I specified no-repeat.

    I am relatively new to both wordpress and CSS, although I have had success with tweaking many other CSS settings in Twenty Seventeen, although after a dozen or or so hours I cannot seem to solve this issue.

    All suggestions would be greatly appreciated.

    Frank

    • This topic was modified 1 year, 11 months ago by bcworkz. Reason: code format fixed
Viewing 2 replies - 1 through 2 (of 2 total)

  • Please provide the URL of the page you need help with. It’s impossible to help with CSS styling issues without examining the actual page.

    Standing by.

    Thread Starter frankmal

    (@frankmal)

    Looking at this issue again, and I now believe that this is not an issue as such.

    The background position is correct i.e.centered while I have a 150px high ‘window’ through to the background. Taking a step back and looking at the situation, this is clearly how it is supposed to work and how it has to work.

    Interestingly in iPadOS Chrome, the images are not shown as a background, they are displayed like dividing images between each page i.e. there is no background. Safari on the other hand does not display the images at all, only a part of the space from either above or below the background image.

    All suggestions are still welcome, however, it appears that if we wish to have a 2000W x 400H image as the background, then this is the result that we must accept.

    Frank

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘2017 Theme CSS .panel-image – Space above & below image’ is closed to new replies.