A member asked me today how to change the height of the background images in the Altitude Pro themes front page widgets.
Here’s the question from a member :
I am wondering if it is possible to change the height dimension on some of the background images ( not all) I tried to just make my image shorter but then it tiles. I am using some of the background image areas with a text widget on them and only have 1 or 2 sentences of type in come cases, so it would be nice if I could shorten these image areas up so there is not as much dead space. I tried doing this by setting the height of the front- page widget box I wanted to be shorter with css but that did not really work as I hoped, but it could be the css I used.
Here’s the home.js file from the Altitude Pro theme which has been modified so the image height is changed.
The changes in the above jQuery have been made on lines 44 & 50.
Both lines have been changed from this :
var windowHeight = $( window ).height();
To this which adds a multiplication operator (*) :
var windowHeight = $( window ).height() * 0.5;
You can also use JavaScript Arithmetic Operators like plus + and minus – like this :
var windowHeight = $( window ).height() + 200;
or
var windowHeight = $( window ).height() - 200;
Specific Sections
You can also change the height for specific background image sections like this :
Modify CSS for Margin & Padding
You can reduce the height of each image section further by modifying the default CSS for padding in the following CSS rule :
.front-page-1 .image-section {
padding-top: 75px;
}
The 60px padding in the following CSS rule :
.flexible-widgets {
padding-bottom: 60px;
padding-top: 100px;
}
And the 54px margin in the following CSS rule :
.front-page-2,
.front-page-3,
.front-page-4,
.front-page-5,
.front-page-6,
.front-page-7 {
border-top: 54px solid transparent;
margin-top: -54px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
position: relative;
z-index: 9;
}
You’ll also find CSS which effects the height of the image sections in the CSS for media queries.
Was This Tutorial Helpful?