-
Posts
-
I would like to implement a two column layout with an imagine in the right column; however, no matter what size I use to define the image, there are boarders all around the imagine. I would like to remove the boarders from the top, left, and right so that the image, essentially, fills up all of the space of the column.
I can’t seem to figure out how to do that and need some help/direction.
Hey craig374,
To use two columns you can add the image as a background and select Equal Height and No Space Between Columns and set a min height
I added a background color to the second columns to show that there is no space between them, the space on the right and left is the page content width:
another way would be to use the Grid Row element and add your background image and the min height, this is a full width element so it fills the screen:
Best regards,
MikeI tested both approaches out, and the Grid Row element is in the spirit of what I am looking; so this is the approach I will head in if I can achieve some other effects on top of this base. First, a link to a page with the Grid Row set up is below for context.
As you will see, I have an image on the right, which is what I want. I also have the columns set to 1/3 and 2/3 width, which is good. I know I can change that if I want or need. I intend to put some text and a button on the left, but before I do that, I would like to overlay a gradient on the image so that the image appears to fade into the column where the text will be. In essence, I want the finished product to appear as if it is one seamless full width banner with text and a button on the left with the imagine grading in as the eye moves to the right.
Can I accomplish this with the Grid Row element, and if so, how? If not, what would be the best approach?
Hi,
I would like to overlay a gradient on the image so that the image appears to fade into the column where the text will be
There is no option for this by default. You may need to edit the image using Photoshop or any image editor and apply the fade effect directly before uploading it as a background.
Best regards,
IsmaelHmmm, well I see that a gradient mask overly is possible using the Image element. Is there a way to make an image full width so it fills up the entire column in the same way it does using the Grid Row element?
Basically, is there a way to accomplish what I want to accomplish? How I accomplish it doesn’t really matter to me.
Hi,
If you want to apply a background to the Grid Row element directly instead of its cells, you can do so by setting a Custom ID Attribute in the Advanced > Developer Settings. For example, use “av-layout-grid-custom-bg”, then add this css code to apply the background to the element:
#av-layout-grid-custom-bg { background: url('http://site.com/background-bg.jpg'); background-size: cover; }Best regards,
Ismael
- You must be logged in to reply to this topic.