Insert image full width - Support | Kriesi.at

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
January 12, 2015 at 2:30 pm #378245

bleepstudio
Participant

Hi I would like to insert images full width, similar to here (click shop collection): http://christianmacleod.com/home-belts-full-screen/#shop-collection

When I insert images that are 2048 x 1536px they appear less than full width: http://christianmacleod.com/belts-image/#shop-collection

How can I use the ‘insert image’ function and place images at full width?

Thanks
Steven

January 12, 2015 at 2:57 pm #378257
Yigit
Keymaster
Hey Steven!

Please add following code to Quick CSS in Enfold theme options under General Styling tab
```
#av_section_5 .container {
max-width: 100%;
padding: 0;
}
```
You can edit your color section elements and give them a unique ID ( http://kriesi.at/documentation/enfold/wp-content/uploads/sites/2/2013/12/color-section-ID.png ) and change “#av_section_5” with “#your-custom-id”

Best regards,
Yigit
January 12, 2015 at 7:45 pm #378485

bleepstudio
Participant

Thanks Yigit, that works great.

Is it possible to have the image align ‘centred vertically’ in the div (not from top)?

Steven

January 12, 2015 at 8:18 pm #378498

Yigit
Keymaster

Hi!

I am sorry but i am not sure if i understood clearly. Can you please post a screenshot and show the changes you would like to make?

Cheers!
Yigit

January 12, 2015 at 9:19 pm #378526

bleepstudio
Participant

Hi Yigit, does this image explain better?…

http://christianmacleod.com/wp-content/uploads/2015/01/image-align.jpg

Steven

January 13, 2015 at 7:17 pm #379033

Yigit
Keymaster

Hey!

It seems like you have set images as custom background image on color section elements. Please try inserting Image element inside color section element instead

Best regards,
Yigit

January 13, 2015 at 7:51 pm #379076

bleepstudio
Participant

Hi Yigit,

I think you are looking at the wrong page ‘HOME-BELTS-FULL-SCREEN’ – http://christianmacleod.com/home-belts-full-screen/
These color sections have the desired look – background images centred vertically at 100%. However background images do not have hyperlink or caption function.

The correct page is ‘HOME-BELTS-IMAGE’ – http://christianmacleod.com/belts-image/
Here the first two color sections have an image inside the section and inside a layout element. However both sections are full image height (larger than 100% screen size) and so the bottom of the image disappears.

Current result:
http://christianmacleod.com/wp-content/uploads/2015/01/Screen-Shot-2015-01-13-at-17.33.39.png

Desired result:
http://christianmacleod.com/wp-content/uploads/2015/01/Screen-Shot-2015-01-13-at-17.33.48.png

Basically I wish to have a color section appear at 100% browser window height with an image inside centred vertically.

Hope that helps to clarify things.
Steven

January 15, 2015 at 10:30 pm #380497

Elliott
Inactive Moderator

Hi!

That would be hard to do because every screen size is different. I tried viewing your screenshots but they all give me a 404.

Regards,
Elliott

January 16, 2015 at 2:46 pm #380757

bleepstudio
Participant

Hi Elliott,

Sorry the links didn’t work. The effect works with images in Color sections set to ‘100% window height’ here:
http://christianmacleod.com/home-belts-full-screen/

Is there a way to achieve the same effect – full width image inside a Color section 100% window height?
http://christianmacleod.com/belts-image/
Steven

January 16, 2015 at 10:49 pm #381125

Elliott
Inactive Moderator

Hey!

When you edit the color section set a background image and then set the “Background Repeat” option to “Stretch to fit”. You need to use large images for this though or they will display blurry / pixellated.

Regards,
Elliott

January 19, 2015 at 6:29 pm #381986

bleepstudio
Participant

Hi Elliot,

I can’t use the image background technique as I would like to use the image as a link and have a caption appear.

I’ve cropped the images and now have the effect is working okay:
http://christianmacleod.com/home-belts-image-crop

How can I change the opacity of the hover effect?
And is it possible to desaturate the colour of the image on rollover?

Thanks
Steven

January 20, 2015 at 6:17 pm #382573
Elliott
Inactive Moderator
Hi!

Add this to your custom CSS.
```
.av-image-caption-overlay {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7) !important
}
.avia-image-container:hover img { filter: grayscale(100%) !important; }
```
Best regards,
Elliott
January 20, 2015 at 8:42 pm #382650

bleepstudio
Participant

This reply has been marked as private.

January 21, 2015 at 10:41 am #382941
Ismael
Moderator
Hey!

Please replace this code:
```
.avia-image-container:hover img { filter: grayscale(100%) !important; }
```
with this:
```
.avia-image-container:hover img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
```
Regards,
Ismael
Author

Posts

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.