How to edit Altitude Pro’s style.css to fix the background images’ loading problem

Posted on by
5/5 - (449 votes)

If you have used a full width slider or background video in/for the front page 1 section of Altitude Pro you might have noticed the the backgrounds for other image sections either load incorrectly or partially in Google Chrome.

The main reason for this buggy behavior seems to be a combination of z-index and relative position for the front page sections in style.css. Here is the StudioPress forum discussion about this.

Below are the changes you can do in Altitude Pro’s style.css if you are using a background video and/or slider and find that background image for one or more sections is not loading properly.

Note: I do not see the point of negative top margin, a huge top border, padding-box background-clip and relative position for front page sections 2 to 7. Also negative top margins for .bottom-image and .bottom-image img are un-needed. The proper way to get rid of space below an image (when it’s present) is to set its vertical-align to top in my opinion, not use negative margins.

At the bottom of this post you can find a link to download fully modified style.css which includes all the below changes.

1) Change

.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;
}

to

.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;
}

2) Change

.bottom-image {
	margin-bottom: -120px;
	margin-top: 100px;
}

.bottom-image img {
	margin-bottom: -10px;
}

to

.bottom-image {
	/*margin-bottom: -120px;*/
	margin-top: 100px;
}

.bottom-image img {
	/*margin-bottom: -10px;*/
	vertical-align: top;
}

3) Add this above the media queries:

.front-page-2 .flexible-widgets {
	padding-bottom: 0;
}

.front-page-2 .flexible-widgets .widget {
	margin-bottom: 0;
}

4) In the 1023px media query add

.front-page-2 .flexible-widgets.widget-full .widget {
	margin-bottom: 0;
}

near the end.

5) In 800px media query change

.bottom-image {
	margin-top: 60px;
	margin-bottom: -80px;
}

to

.front-page-2 .solid-section .flexible-widgets {
	padding-bottom: 0;
}

.bottom-image {
	margin-top: 60px;
	/*margin-bottom: -80px;*/
}