Altitude Pro theme – changing dimension of front page background images

[SusieQ]

The Altitude Pro theme demo uses a 1600?—1050 pixel image for the each of the front page background images.

With this in mind, I'm wondering whether it's possible to reduce the 1050 pixel dimension to make a less deep background image?

I've tried uploading a new background image with 1600x700 pixel dimensions, but the background just defaults to the larger size. This results in a small amount of text displaying over an unnecessarily deep background. (I can't provide an URL as the site is yet to go live.)

I suspect from online searches that I probably can't adjust this, but just throwing it out there in case someone knows of a workaround!

Many thanks,

Susie

[SavvyJackie]

Hi Susie,
If I understand what you're asking correctly - you should be able to limit the height of one or more the image sections on the home page by using a max-height for that section. I added a max-height of 700px in this example below by editing the style.css where this code was found.

.front-page-1,
.front-page-3,
.front-page-5,
.front-page-7 {
	background-attachment: fixed;
	background-color: #fff;
	background-position: 50% 0;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size:    cover;
	background-size:         cover;
	max-height:700px;   <------- I added this
}

If you only wanted to limit the height of the first section you could add this code just below that code above code instead of adding to all:

.front-page-1 {
	max-height:700px;  
}

Hope that was what you are looking for.

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[SusieQ]

Thank you @SavvyJackie for taking the time to respond.

.front-page-5 {
	max-height:700px;  
}

I've tried the above fix, but my text is no longer centred within the revised background image, but rather appears near the bottom ... are you able to suggest a way to centre the text?

Many thanks,

Susie

[SavvyJackie]

Try this instead:

.front-page-5 .image-section {
	max-height:700px;  
}

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[SusieQ]

Brilliant, thank you @SavvyJackie ...

[SavvyJackie]

My pleasure. Happy coding.

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[Author]

Posts