On Design MCW010 page, I added a background image in the Introduction section of Cornerstone. The image looks great in Cornerstone but when I do a site view, the bottom part of the image is missing. I have changed margins and padding, but neither has fixed the issue.
Hi @eutaw,
Please consider that the background images work that way. The background image is set to cover. That means the background image will take up the whole container and the browser will zoom the image in or out to accommodate with the size of the container in different window sizes.
Now you see the image look different than the original website in the Cornerstone because the Cornerstone has the left sidebar for all the element stuff. If you shrink the browser window on the website front end you will see that the image will cut off like the Cornerstone version.
Here is a good article which shows the different ways that you can lay out background images:
Another point is that the section that you added the background is a Classic section, which means you added the section while back which there was no new series of the elements.
If you add a new section you will see that a new set of controls will be available and the top of the section will be like this:
Using the new section will give you the ability to have more control over the background and choose between the cover or contain mode.
Regardless of the mode that you choose, I feel that you expect a behavior of an image element from the background which is not possible in the web.
Thank you for your understanding and I hope I could give context to the issue at hand.
OK, thanks. I understand the article. I am still not sure why adding 220px of padding to top and bottom enabled me to see more of the picture. Maybe I will use the image element instead of a background image. I’ll play around with it.
However, images are not behaving as I expect in the next section, ‘Introduction: Text Right’. I want the layout of Row 1 to be 2/3, 1/3, but the text image gets really small when I click that. I want a large image on the left (2/3) and a small image on the right (1/3). But I’m only getting the large image if I click 1/3, 2/3. Why is this?
Hey @eutaw,
You will need use the Responsive Text feature for your text or simply reduce the size of your text using the Font Size setting of the element. To clearly see what I mean, please watch the screencast in the secure note.
Thanks.
In reference to the background image that is in the Introduction section, what I am trying to achieve is shown on the website that I have in the secure note. No matter how wide or narrow I make my window, the first image on the homepage of that website is seen in its entirety. Is this possible with the X-theme?
For the second issue for which you added the screencast, I’ll open it in another thread.
Hi again,
I checked the website you shared and they have achieved this with the image and not with the background, this requires custom CSS to have the similar layout. To do this in X, first add a section, drop an image element inside the section. After selecting an image, go to it’s Customize tab
In Element CSS field, paste the following CSS:
$el img {
width: 100%;
}
Now you can add a Headline or a Text element in the same section that has the image, go to it’s Customize tab and add the following code in the Element CSS field
$el {
position: absolute;
transform: translate3d(-50%, -50%, 0);
top: 50%;
left: 50%;
}
That should do the trick, I’ve created a test page for you which I’m sharing in the secure note with the same steps I mentioned above so you can see the result.
Cheers!
Thank you. The test page is exactly what I am trying to achieve. I carefully followed the instructions but my image is being contained. Do you know why?
Hello @Eutaw,
Thanks for updating in!
You must disable the column container in the row setting so that the image will become fullwidth.
Hope this helps.
Thank you.
You’re welcome!
Even though the Column Container is turned off for Row 1 of the Introduction section, my image is still being contained. I inspected my page and the the Test page you did. They seem to be the same, but are behaving differently. Sure hope I can get this resolved.
Hi again,
I went ahead and changed the width of Image element from auto to 100%
This has fixed the width problem. Please clear your browser’s cache and check the page again.
Cheers!
Thank you. thank you
You are most welcome. 
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.