Fullwidth on the color section - Support | Kriesi.at

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

Author

Posts
May 19, 2016 at 9:49 am #635071

hiromixism
Participant

Hi there,

Could you tell me how I can insert a picture with fullwidth (which looks like a fullscreen) on the color section. I read some of the old posts and tried them, yet still no success…

Thank you

Hiromi

May 19, 2016 at 10:43 am #635099

begrafiks
Participant

Hi @hiromixism;
this topic may help you.

May 19, 2016 at 6:40 pm #635396

Yigit
Keymaster

Hi,

Also, please refer to this post – http://kriesi.at/documentation/enfold/color-section-with-100-container/

@begrafiks thanks as always :)

Best regards,
Yigit

May 21, 2016 at 2:01 pm #636198

hiromixism
Participant

Thank you, I tried what was said, yet no succeed. I’m using the demo-imported style which has a menu bar on the left side. I wonder if it needs some special custom to show the picture with full width.

The only way to show the full with picture so far is by the ‘fullscreen slider’ element for this template.
I know this might be something simple, yet struggling for hours.

Thank you for your support.

Sincerely

Hiromi

May 23, 2016 at 2:13 pm #636777

Yigit
Keymaster

Hi,

It does work fine on my end. Please flush browser cache and refresh your page a few times.
If that is not what you meant, please post a screenshot and show the changes you would like to make.

Best regards,
Yigit

May 26, 2016 at 8:19 am #638572

hiromixism
Participant

Thank you for the reply. Please check the screenshot. What I want is the image on the first screenshot (as the color section), and the text on teh second one. The first screenshot is taken by using the fullscreen slider.

Thank you!

Hiromi

May 27, 2016 at 4:35 am #639062

Ismael
Moderator

Hi,

Did you set the color section’s Section Background > Background Repeat to “Stretch to fit”? If this option is enabled, it will set the background size property to “cover”, description here: http://www.w3schools.com/cssref/css3_pr_background-size.asp

Best regards,
Ismael

May 27, 2016 at 5:18 am #639075

hiromixism
Participant

Thank you Ismael,

I checked ‘stretch to fit’, yet it’s still like this. Only the right side of the picture shows up…

Hiromi

May 28, 2016 at 3:01 am #639622

Ismael
Moderator

Hi,

It displays part of the background image because the background size property is set to “cover”. We can set the background size to 100% but it will distort the image. Are you OK with that?

Best regards,
Ismael666

May 28, 2016 at 4:07 am #639633

hiromixism
Participant

I guess small distortion will be fine., since the image is displayed almost perfectly if I use the fullscreen slider. (picture above)

Thank you.

Hiromi

May 28, 2016 at 5:27 am #639662
Ismael
Moderator
Hi!

Add this in the Quick CSS field:
```
#fwcs {
    background-size: 100% 100% !important;
}
```
If you need to move the position of the background and make the left “flower” more prominent, use this:
```
#fwcs {
    background-size: 100% 100% !important;
    background-position: 150px 0px !important;
}
```
Cheers!
Ismael
Author

Posts

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

You must be logged in to reply to this topic.