Border

Hello!

just started testing a little Xojo Web, trying to put a rectangle “full screen” as the backround in the browser.

I can not get rid of a tiny white border around the rectangle, see attached image.

Can I get rid of it?

Is this just a general background color for the page? I ask because there are arguably better ways to do so, and you won’t have to work around a border like that.

1 Like

Havent used xojo web before, so please enlighten me :slight_smile:
I ultimately want to place an image in the background, like a wallpaper

Web 2.0 is still growing, so some things you have to know ahead of time what you’re doing. It’s not the easiest for new users, that’s why I ask what you’re up to :slight_smile:

You can set a color in the Opening event of the page like this: me.Style.BackgroundColor = &c0000ff

I’m not sure why setting the CSS background-image property to an image url is failing so miserably here, so maybe someone who plays with the CSS properties a lot can swing by and comment.

This code: me.Style.Value("background-image") = "url('https://timi.me/img/hero_bg.jpg')" is reaching the browser like this: background-image: url("&apos"); and I do not know why.

thanks @Tim_Parnell

You can remove the border by using code (Rectangle Opening event):

me.Style.Value("border") = "None"
me.Style.Value("border-radius") = "0px"

You can set the Window color, without using a Rectangle with (Windows Opening event):

me.style.BackgroundColor = color.Blue

This will not help to place an image like a wallpaper.

3 Likes

I think it is a bug.

With this code:

me.Style.Value("background-image") = "<raw>url('https://timi.me/img/hero_bg.jpg')</raw>"

you get:
image

with this code:

me.Style.Value("background-image") = "<raw>url('https//timi.me/img/hero_bg.jpg')</raw>"

you get:
image

So maybe 2 bugs?
1.- the need of <raw>
2.- cutting the url at the colon

3 Likes

Awesome details, thanks for digging in!

2 Likes

Plus, in general things might slightly look differently in different browsers. I wrote about his lately, see below. As you can see the red of the X looks different on Firefox on my machine.

This is not an issue of Xojo, but I still don’t have an explanation for this RGB should be RGB in all browsers. For most users, including myself, it doesn’t matter.

I suspect some alpha whatsoever blending in the CSS of bootstrap, but I had other priorities and no time to look deeper into it. Fact for me: out-of-the-box there are slight differences, depending on the browser you are using.

1 Like

urls shouldn’t have quotes. they should be written like this:

me.Style.Value("background-image") = "url(https://timi.me/img/hero_bg.jpg)"

I don’t think the framework should have mangled it regardless, and what happened in the case where it gave up at the colon? o.O

Update: also both W3Schools and MSDN have quotes in the css background-image url.

3 Likes

Using your code I still get this:
Chrome
image

Safari
image

Firefox
image

So it looks like removing the quotes helps to not use Raw, but still problem with the colon.

2 Likes

Can’t believe it, my case was closed. Case 63008

As Tim said, you go to W3Schools and you find this code:
background-image: url("photographer.jpg");

You go to MSDN and find this code:

background-image:
  linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
  url('https://mdn.mozillademos.org/files/7693/catfront.png');

Here is the div using Greg’s code in Chrome:
image

Safari:

Firefox:

Really don’t understand why @Greg_O_Lone says that we should not use quotes and using his code is a) not working and b) showing quotes in every browser

4 Likes

Seems that @Greg (I mean Xojo) is parsing the code himself. This is working:

me.Style.Value("background-image") = "url(//timi.me/img/hero_bg.jpg)"

Edit: perhaps to ensure https is enforced? … I had the idea when I saw that in your examples only https showed up in the browser …

Using the developers tools I manually changed the information for background-image and added MDN code:

linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
  url('https://mdn.mozillademos.org/files/7693/catfront.png');

This is where I changed it (chrome):
image

The code looks like:
image

And the Xojo Rectangle looks like this:
image

So at least a single quote is valid.

Oh that wasn’t a question I had at all. Here’s the standards documentation: https://www.w3.org/TR/CSS2/syndata.html#uri

1 Like

Am I missing the point? This is the change I made in the FC example and it is working:

me.Style.Value("background-image") = "url(//mdn.mozillademos.org/files/7693/catfront.png)"

Not the way I would ever have thought of using the URL, but it works.

Thank you Jeannot, yes it works like that.

The problem is that it will be hard for a regular user to go from the sample they saw on MDN:

linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
  url('https://mdn.mozillademos.org/files/7693/catfront.png');

to

linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
  url(//mdn.mozillademos.org/files/7693/catfront.png)

in Xojo to make it work.

2 Likes

Sure, I struggled too, it only came to my mind, when I saw the sole “https:”-string in the code that Greg might be parsing the Url in the framework. I could imagine that he is doing that to enforce a secure connection via https to ensure that people will not get errors (and Xojo complaints) if they mix secure and insecure content …

But we are on the same page, not compliant with any standard and will make it hard for the seasoned developer and most likely as well for beginners, who have no other chance than following the standard guidelines, which will not educate them on this “Xojo-way”. But at least it is working, that’s pretty cool.

You can put this code in the Window opening event:

me.Style.Value("background-image") = "url(//timi.me/img/hero_bg.jpg)"
me.Style.Value("background-size") = "cover"

The image will be resized without distortion to fill the browser window.

1 Like