image modification in gantry 5
-
-
- fw114
- Jr. Rocketeer
- Posts: 41
- Thanks: 0
-
well,
i set a BG image in
Core Styles > Base Styles > Background Image
Well, so far so good.
Where can i modify what image mode i want for the BG image? i.e. cover ?
What i found for now , is not very much, depending on image modification.
I expected that an image that's inserted (for example) in the news silder, completely fit's in "the box" it's been put in
and don't get cut off on top and bottom.
same for the BG image. It just get's cut off, no matter what changes i made here:
Layout > Container > Fullwidth / Boxed and so on
Can i change that in the jommla backend, if so where or do i have to change the css files ?
thanks
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
Please would you post your URL, superuser id and pswd in the secure tab of your post and I'll have a look for you.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- fw114
- Jr. Rocketeer
- Posts: 41
- Thanks: 0
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
The background image is already set to cover?
The problem is that your image is not wide enough at 1280px - it needs to be 1950px so the "cover" is upscaling your image to fit the width which obviously means that the image gets taller too (to avoid distortion).
So, I've suggest that you just alter your image size to 1950px x 1024px.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- fw114
- Jr. Rocketeer
- Posts: 41
- Thanks: 0
-
MrT wrote:
The background image is already set to cover?
The problem is that your image is not wide enough at 1280px - it needs to be 1950px so the "cover" is upscaling your image to fit the width which obviously means that the image gets taller too (to avoid distortion).
So, I've suggest that you just alter your image size to 1950px x 1024px.
Regards, Mark.
Well, the image does not get displayed completely. The cover does not work right, because the cover does not show the lower part of the image, which works in a another template correct. The hole images gets displayed and scrolled correctly with strechting or shrinking it to the needed size.
not in your template.
Same for the news silder.. Here the upper part of the images is cut off.
Get the images in Full size and you can see what i mean - Last Edit: 3 years 8 months ago by fw114.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
Ok, here's a screenshot to prove it to you.
If you want to force the height and width to fit then Use this code...
html body { background-size: 100% 100%; }
Which of course will distort the image all out of place and look awful..
To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .
Remember to recompile CSS from base outline too.
gremt - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
The newsslider height is fixed because of the scrollbar on the left. The image is always made to the width of the container 100%, again to do this that means that the height has to be cropped. If you resize your image to 1200px x 690px to match the demo then you will be fine then.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- fw114
- Jr. Rocketeer
- Posts: 41
- Thanks: 0
-
Well the image is this one, and if you scroll down on the page the displaying stops at the hands.
go to the site, scroll down and you see what i mean.
with a correct cover you should see his feet , wall and sword. but you won't
-
-
-
- fw114
- Jr. Rocketeer
- Posts: 41
- Thanks: 0
-
MrT wrote:
The newsslider height is fixed because of the scrollbar on the left. The image is always made to the width of the container 100%, again to do this that means that the height has to be cropped. If you resize your image to 1200px x 690px to match the demo then you will be fine then.
Regards, Mark.
It would make much more sense, if the template aka css, fits the image into the block instead of editing every image that it fits to the template.
don't you think ?
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
I've explained why and i've explained what you need to do. You image is virtually square the monitor is not - it's more of a real rectangle.The alternative would be to force the height and have the sides crop instead. If you force a square to fit a rectangle (as I showed with the CSS above) then it will distort or have to be cropped.
Just resize the image and there won't be an issue.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.057 seconds