Jumbotron Image sizing

Permalink Browser Info Environment
Hellllooo,

I was wondering if there is a way for the feature image in the jumbotron to not scale it up? ( I know that's not the point of the feature but...) My client seems to only have certain sized photos and they can't retake them so I can play with the sizes. The jumbotron seems to make is so big it cuts off parts of the photo we are trying to focus on. Maybe there is a certain size it displays photos at the best?

Thanks for your input

Cheers

Type: Discussion
Status: In Progress
designsforchange
View Replies:
c5mix replied on at Permalink Reply
c5mix
Try adding this CSS to the "Add your CSS" box in the Customization page (Dashboard->Pages and themes and click Customize next to Treviso). This will override the default behavior.

#feature {
background-size:auto!important;
background-repeat:no-repeat;
background-position: center top;
}
designsforchange replied on at Permalink Reply
designsforchange
Hi :)

I have added the code in and it repeats the photo across the jumbotron horizontally and vertically. The image size I inserted was 940 x 400. Do you know what the perfect size is for an image to fit in that area, but not altered by the jumbotron? Maybe that will just fill in the space perfectly?

Thanks again and again :)
angelas replied on at Permalink Reply
angelas
Hi Chris, having the same issue this end and the CSS given doesn't fix the issue. Will keep an eye on your response to 'designsforchange' - cheers, angela
designsforchange replied on at Permalink Reply
designsforchange
I think 1265 pixels works the best for width, but I can't sort out the height of the photo to work properly. It either cuts off the top of the photo or repeats itself. When I view it in full screen the size doesn't seem to be an issue, but I would like all browsers to be able to view the photos without having to change screen view modes.

Thank you for your help.
c5mix replied on at Permalink Reply
c5mix
It's really not going to be able to do that since the theme is responsive and all screens/browsers have different sizes and orientations. Something will get cut off somewhere.
designsforchange replied on at Permalink Reply
designsforchange
Ok :) Is there an exact size I can try inputting my images as that might make it so that the top always isn't cut off? Houses with no roofs won't sell :)
designsforchange replied on at Permalink Reply
designsforchange
It just doesn't seem to matter what I try for sizing, the nav bar is always cutting off the top of the image and I've tried center bottoming the image as well. It's like the image is there but it's never shifted down far enough to see the top.
c5mix replied on at Permalink Reply
c5mix
Oh, the background-repeat line should be this instead:
background-repeat:no-repeat;
designsforchange replied on at Permalink Reply
designsforchange
Is there a way that I can make the feature area a little bit higher so that it won't cut the tops of the image off? If there is no fix, I will have to start the project over with a different template :(

Thank you
c5mix replied on at Permalink Reply
c5mix
Try adding this to the "Add your own CSS" box in the theme's customization page:
body.page_type_home #feature {
margin-top:80px;
background-attachment:scroll;
}
scrivener replied on at Permalink Reply
scrivener
I have a client that wants the callout to show in the opening window under the photo instead of just the full-screen picture. Is there an easy way to limit the height of the jumbotron photo to allow that?
c5mix replied on at Permalink Reply
c5mix
Add this to the "Add your CSS" box in the theme's customization panel (Dashboard->Pages and Theme->Themes and click Customize next to Treviso):
body.page_type_home #feature {
height: 100%;
}

Just change 100% to whatever you want it to be.
scrivener replied on at Permalink Reply
scrivener
Perfect! Grazie mille!
c5mix replied on at Permalink Reply
c5mix
You're welcome!

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.