Some how I can't get this simple task to work. I need to have a background image on a screen that is centered vertically and horizontally on the screen. It needs sit behind a scrolling list. The list needs to have a transparent background so the background image shows through the list cells where ever this is no content (ie the white space in each cell). I've tried a bunch of things and nothing has worked. One issue is that the image scrolls with the list. It needs to remain centered on the screen. Also getting the image to show through the white space in the list doesn't work either. I created a simple app that shows the latest iteration of tries. Any and all help with this would be greatly appreciated. Note: I don't know where the gradient is coming from... the image itself doesn't contain the gradient that is being displayed.
Hi Tom, You are nearly there. Add the "ListContainer" to the class of the ListContainer element and in your stylesheet make sure there is a '.' at the start and that will do the trick.You will notice however that if there are not enough records your background will be clipped. You can fix this by adding"height: 100%;"to the.ListContainer stylingI did also try to replace .ListContainer with body.And for me it is working fine (in case you prefer having the background image at body level rather than tied to the list container)
Hi Tom,
I have edited the oml. file that you have shared can you check once.
Is this the way you need it.
HI Tom Meehan ,
You use the centre align to make it on centre
If it is working for you, like and mark post as solution
Thanks
shehroze khan
Hi Tom,CSS is your friend here.
.ElementWithYourBackgroundClass{ background-image: [URL to your Image]; background-repeat: no-repeat; background-position: center; }
background-position: center;
if the image moves you can add
background-attachment: fixed;
if the background is too big you can play around with:
background-size: [contain | % | cover]
To make it show through the white of the whitespace of the list. Change the background colour of the list elements
Kind regards,Eric
Thanks for your reply. Although your suggestions didn't work for me they did give me ideas of various things to try. I finally figured out if I remove the Common/Layout block from my screen, all works perfectly. Setting the css for my screen to
body {
background-image: url('/MrDoNothing/img/MrDoNothing.aface.png');
background-size: 50%;
background-repeat: no-repeat;
background-color:transparent;
}
.list {
background-color: transparent;
.list-item {
The screen comes up and for a split second the image is visible but then is covered by the list. I've tried going into the layout block and changing the background-color to transparent. Doesn't help. I've confirmed that setting the background-color has an effect because when I set it to any other color, it obeys and sets the color accordingly. If I remove the the whole Common/Layout block it all works but I really need to have the components provided by the Common/Layout block. Seems like I'm getting close but can't quite get what I need.
Hi Tom, What you are trying to do is indeed what I proposed. Have you thought about moving the background up to the container where the list is in rather than the body? You should not need to remove the common/layout for this to work.If you have an Url (or new .oml if the url is private) to the application for me I can have a look
Thanks. I guess I'm not sure how to reference the "container" in css. Using something like this doesn't seem like it would work:
container {
I did try enclosing the list in a container and then naming the container and then use the container name in the css. No good. I took that out of the code. Attached is the most recent rev of the app. Thanks for sticking with this.
Perfect. Thanks