Start a new topic
Answered

Home page image - How to show more image height

 The home page default image size seems to be around 1600x665 and scaled to 1440x598. That's fine but the bottom part of the image can't be seen on the home page. What code needs to be added where to tell the home page to display more of the home page image height?


Best Answer

You would edit the CSS for the Homepage - Hero Theme widget. Now, since you want to fit the image, instead of moving in, I would recommend using this CSS instead:

  

.content-shell {
    background-size: 1400px 100% !important;
 }

  The 1400px in this case is the width which you can adjust as you see fit. Now for the height, which is the 100% in this case, it was set as 100% to make the original height fit in there, so now you can see the whole image height with this.


Hi Bret, in your case you could add a background-position to the element that holds the background image. Something like this:
.content-shell {
    background-position: 0px -10px;

 }
And simply change the second value (The one with the -10px) to a more negative or positive value until it looks perfect for you. The first value is to move the image horizontally (left/right), the second value is to move it vertically (top/bottom).
Where would I put that code? Inside the home page css input box?
Note: I am trying to show more of the image, not move the image. So, basically the image is big enough but it is cutting off that bottom few inches. I want the image to appear taller without being cut off at the bottom.

 

Answer

You would edit the CSS for the Homepage - Hero Theme widget. Now, since you want to fit the image, instead of moving in, I would recommend using this CSS instead:

  

.content-shell {
    background-size: 1400px 100% !important;
 }

  The 1400px in this case is the width which you can adjust as you see fit. Now for the height, which is the 100% in this case, it was set as 100% to make the original height fit in there, so now you can see the whole image height with this.

Perfect. I used 100% 100% to get the look I was going for.