Community Forums › Forums › Archived Forums › Design Tips and Tricks › Altitude Pro – change to "contain" images?
Tagged: altitude, contain, cover, images, responsive
- This topic has 5 replies, 3 voices, and was last updated 8 years, 4 months ago by James.
-
AuthorPosts
-
June 7, 2015 at 5:03 pm #155272bootleMember
Instead of the home page images "covering" the screen, can they be made to "contain" the images?
When I tried, the height of the containing element remained, so there was a lot of space below the images.
The reason for doing this is to always see the images in their entirety; for this application it's essential.
I've made this change (last three lines) which works for the images but leaves whitespace below:
.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;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}I've hacked it using lots of breaks:
@media only screen and (max-width: 800px) {
.image-section {
height: 480px !important;
}
}etc...
http://genesis.daolu.co.uk/
but I suspect there's got to be a better way.June 7, 2015 at 7:42 pm #155291JamesParticipanthey there
the Altitude theme uses a script to set the height of those sections to the height of the browser window.
you would need to remove the scripts and do some css to work to remove this auto height
you do Tai Chi, that's great, i'm from a martial arts background myself
explain more about how you want those images to look on your site, i'm sure i can come up with something for you.
June 8, 2015 at 9:14 am #155375bootleMemberThanks Jamie, see genesis.daolu.co.uk the idea is for the photos to remain at their natural aspect ratio (full browser width of course). However the height remains at the browser height, meaning a lot of white space below the images. Shrink the browser width to make it clear.
I hacked it with multiple media query break points, but still that's not neat or perfect. I'm sure there's a continuous way.
June 8, 2015 at 3:32 pm #155429JamesParticipantok
i see when the browser is smaller there is too much white space
your always going to get this when using the background images, this is why it is set to "cover" by default
do you need to have the images "fixed" would it be ok if they were to scroll (move up with the page)?
let me know as i have an alternative solution for you.
December 1, 2015 at 7:14 am #172336FlorcitasMemberHi Jamie, I would like to do that: change the script to set the height of the front-page-1 (i.e.) to the height of the image I upload, not to the height of the browser.
You say that I would need to remove the scripts and do some css to work to remove this auto height. How can I do that?
PS: I am starting in this... sorry :S
December 1, 2015 at 7:35 am #172337JamesParticipantHi Florcitas
yeh it would'nt really work out that way because the images are as background images, those sections need to be set to some sort of height.
there are lots of things to think about here
the images are quite tall, so if those sections where set to the height of each image, there would be even more scrolling, and be even higher than the window height.
and if you reduce the height of those image sections ( so they are less than the browser height) then because the images are not wide enough, you will get even more white space each side.
those images can be cropped, there is lots of tree and grass in each one that could be cropped out to make the images wider.
you could also look at adding these images as images in widgets and not as backgrounds (padding would need to be removed for those sections of cause.
i have lots of suggestions for you.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.