-
Posts
-
Hi there,
I wonder if there is another option to place fullwidth images on a page except using the fullwidth slider element? See for example at https://www.der-prinz.de/portfolio-item/loudness/ the image of the business stationary that expands from edge to edge of the browser window (made with a fw slider).
I can´t find a way to do this without the slider. Section background does not do the job for me.
Any other option?
Cheers
MichaelHey Michael,
You can add a full width image as a color section background.
Let us know if you have any questions.
Best regards,
VinayHey Vinay,
as I wrote in my initial post: “Section background does not do the job for me.”
I need the full image to display and if I use a section bg it will crop the image. If I define a specific height of the section this height will also apply to mobile devices and the image will be far too large (high) on those devices. So no option for a proper result.
Seems like the full width slider currently is the only way to go. Even if a slider is a bit too overdone for a single image and if you look at this page https://www.der-prinz.de/portfolio-item/der-prinz-logo-und-branding-2016/ I had to use 5 sliders to achieve the look I wanted.
Any other good idea?
Cheers
MichaelHi,
Please refer to this post – http://kriesi.at/documentation/enfold/color-section-with-100-container/ and create a Color Section element with 100% container width and place your image inside it.
Best regards,
YigitGreat. This was the solution.Unfortunately not perfect for images because when the image is 1500 px wide it will work for most screens because they are smaller than 1500 px. If the screen size exceeds 1500px the image doesn´t get bigger to fill the screen width.
A background image can be triggered with CSS background-size:cover but that does not work for a regular image.
Hi,
take a look at this little screencast. The first image is an image inside a section element with the proposed css solution to make it really 100%. The image is 1500 px wide so that works on a 1440×900 px resolution an lower.
The second image is a full-width slider element with the same image of 1500 px width as the only slide that of course also works as expected.
At around 13 Seconds in the video I´m expanding the browser window to more than 1500 px and you can see that the first image doesn´t get bigger than 1500 px whilst the image in the FW-Slider stays fullwidth no matter how big the screen gets. And that is what I want to achieve with a regular image.
Of course I could use an image that is e.g 4000 px wide which will cover potentially any monitor size out there but I don´t want to use such big images for obvious reasons ;-)
Cheers
MichaelHey!
Thank you for the update. However, we can’t see the screencast because it creates an error. Anyway, please do the following steps.
1.) Add a color section then follow this short documentation to make the container full width.
// http://kriesi.at/documentation/enfold/color-section-with-100-container/2.) Inside the color section, insert the “Image” element.
3.) Go to the Quick CSS field and then add the following css code.
.avia-image-container avia-image-container-inner, .avia-image-container avia-image-container-inner img { width: 100%; }The image will inherit the width of the browser size.
Best regards,
IsmaelHi Ismael,
yessss…it works now. See https://www.der-prinz.de/ueber-uns/
Thanks mate. You can close the thread
- The topic ‘Full-Width Images on a Page’ is closed to new replies.