- This topic has 3 replies, 3 voices, and was last updated 3 years, 8 months ago by
.
-
Posts
-
Is there a way to make the header image resize itself, not get cutoff when the browser window size changes. If not, is there a way to not have a gap between the header menu and the content itself when no header image is selected? So i can place a photo in the top of the content to use as a header image.
To take account of the variation in aspect ratio between mobile and desktop/laptop, you could use a different backgorund image on mobile, with this custom CSS (Customize > Additional CSS):
@media screen and (max-width: 768px) { .main-header { background-image: url(path-to-image.jpg); } }Thank you for your response. But going from desktop to mobile isn’t the only problem. I’m having problems with it cutting off the image even on a desktop. Unless I make the window the perfect size for the header image it gets cut off. Off I make the window to narrow it cuts off the sides of the image, if I make the window too wide it cuts off the bottom of the image. I want it to respond by resizing the image to the window, like it would do if I put it in the content of the page. Thank you
The important thing to note is that a background image behaves differently to an absolute image that is put in the content of a page. They are rendered differently in HTML.
The background image in the header has to cover the whole of the header section, top to bottom and side to side, so when the aspect ratio of the area changes, then some of the image will be cut off from either the top/bottom or the sides, depending on the aspect ratio of the image and the aspect ratio of the device screen/browser window.
If you need the whole of the background image to always be visible (and displaying more like an absolute image that is placed in the content of a page), without anything being cut off, then you can use the following custom CSS to change how the background is displayed. But instead of seeing parts of the image being cut off, you will instead see empty space either above/below or to the sides of the image.
.main-header { background-size: contain; background-position: center; }
- The topic ‘Header Image cutting off based on browser window size’ is closed to new replies.