border-image trouble! css-help! - ☔︎ ∙ I need Help!

bennizone
Casual Poster ⚓︎

⛺︎ My Room
Itch.io: My Games

Artifacts:

border-image trouble! css-help!

« on: a Summer day »

Hi friends,
well, I'm stumped. I've always had trouble wrapping my head around border-images... and well, I still can't quite figure it out! I'd like to turn a pokémon-card into a border, and then be able to write my text within the information-field, where you'd usually find the pokémon-attacks and such. I used this generator to try and make it work, but alas...

here's my attempt at CSS,

Code

.mag{
border-image-slice: 562 518 537 543 fill;
border-image-width: 200px 160px 200px 160px;
border-image-repeat: stretch repeat stretch repeat;
border-image-source: url("https://bennizone.net/funzone/magnemite/mag_b.png");
border-style: solid; 
background-clip: padding-box;
min-height:500px;
}

and here's the HTML.

Code

<div class="mag">why is this text not inside the card?</div>

What am I doing wrong? Any help appreciated ! Thanks!


	Logged

https://bennizone.net/graphix/newlayout/more2.png

https://bennizone.net/graphix/newlayout/foryou/fbanner-lifestyle.png

WWW.BENNIZONE.NET

Artifact Swap:

Noah_S
Sr. Member ⚓︎

Noah. Earth. I make website. I.. I.. Noah. Earth.
⛺︎ My Room
iMood:

RSS:

Guild Memberships:

Artifacts:

Re: border-image trouble! css-help!

« Reply #1 on: a Summer day »

I've been trying a bunch of different things, and I can't figure it out either.

But if you plan on a static size for the image, another way of doing it is to write the text under it and give its margin-top a negative value. Here's an example code for how I put one image on top of another last week.

Code

<style>
#link {
margin-top: -95px;
margin-left: 56px;
}
</style>

<img src="https://art-noah-s.eu/images/webringwidget.png">
<p id="link"></p>

This is followed by some javascript that defines p id "link" as an image. You could just as well write text about Magnemite between the tags.


	Logged

Artifact Swap:

ribose
Sr. Member ⚓︎

⚘ ⚘ ⚘ ⚘ ⚘
⛺︎ My Room
StatusCafe: ribose
iMood:

Itch.io: My Games
RSS:

Guild Memberships:

Artifacts:

Re: border-image trouble! css-help!

« Reply #2 on: a Summer day »

the first thing i noticed is that your card image has a lot of blank space in it! the way your code is set up does actually place the text within the image, it's just over in that blank area. the first step would be trim off all the transparent parts in an image editor.

next, put the new version of the image into the generator to get new slice and width values.

after that, you can adjust the position of the text within the element by adding some padding. you'll need enough top padding to push the text below the magnemite art on the card, and a little bit of padding on the sides.


« Last Edit: a Summer day by ribose »	Logged

https://camo.githubusercontent.com/491b9e205611e603fa426d303bef52528c10ba8b96d3139e39a2e38103e5c563/68747470733a2f2f7269626f2e7a6f6e652f38387833312f736974652f7269626f73652e706e67

https://camo.githubusercontent.com/54e6ab289e4df0e4e42c9c30c886d2d7c8df708686029a1f654e2930389454b4/68747470733a2f2f7269626f2e7a6f6e652f38387833312f6d696e652f76696577736f757263652e706e67

https://camo.githubusercontent.com/f5bfa6417506fb7531aa82818e33c1ab1277070812531c09638c5aca5d2ea164/68747470733a2f2f7269626f2e7a6f6e652f38387833312f6d696e652f7777772e706e67

https://camo.githubusercontent.com/f7d9283e2ad6924bc82c68b6bd1637dfe82b9baa6362247cee489c9f8723bed8/68747470733a2f2f7269626f2e7a6f6e652f38387833312f6d696e652f7465616c2e706e67

https://camo.githubusercontent.com/66b9d37563323d2962eccea0381ded1337d1d12652da870b82e8c40d5c2e0d54/68747470733a2f2f7269626f2e7a6f6e652f73756e6461792f666973682f726174686572626566697368696e2e706e67

Artifact Swap:

Dan Q
Hero Member ⚓︎

I have no idea what I am doing
⛺︎ My Room
RSS:

Guild Memberships:

Artifacts:

Re: border-image trouble! css-help!

« Reply #3 on: a Summer day »

Quote from: ribose on a Summer day

the first thing i noticed is that your card image has a lot of blank space in it! the way your code is set up does actually place the text within the image, it's just over in that blank area.

This is your first and most-fundamental problem. E.g. this extra line of CSS will "solve" the problem for you, but not as well as cropping the image down and then using a (smaller) padding:

Code

padding: 200px 160px 200px 160px;


	Logged

Artifact Swap:

Noah_S
Sr. Member ⚓︎

Noah. Earth. I make website. I.. I.. Noah. Earth.
⛺︎ My Room
iMood:

RSS:

Guild Memberships:

Artifacts:

Re: border-image trouble! css-help!

« Reply #4 on: a Summer day »

Quote from: ribose on a Summer day

the first thing i noticed is that your card image has a lot of blank space in it!

Oh, that's why it was centered in the editor I tried. I've never worked with border images, I thought there was something I didn't understand in the code that centered it.


	Logged

Artifact Swap:

bennizone
Casual Poster ⚓︎

⛺︎ My Room
Itch.io: My Games

Artifacts:

Re: border-image trouble! css-help!

« Reply #5 on: a Summer day »

Thanks everybody!! re: the blank space, I thought I had to do that because of this tutorial , but in hindsight I'm not even sure I understood their tutorial completely. Anyway, I really appreciate these responses! However, the text still doesn't.. go in the card!

Code

<!DOCTYPE html>
<html>
<style>
.mag{
 border-image-slice: 548 70 140 121 fill;
border-image-width: 300px 56px 119px 93px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch repeat stretch repeat;
border-image-source: url("https://bennizone.net/funzone/magnemite/mag_border.png");
border-style: solid; 
background-clip: padding-box;
min-height:500px;
}

</style>
<body>

<div class="mag">why is this text not inside the card?</div>

</body>
</html>

Also, I don't need the box to stay the same height, I don't mind it getting longer. Just not wider, haha.


	Logged

WWW.BENNIZONE.NET

Artifact Swap:

Noah_S
Sr. Member ⚓︎

Noah. Earth. I make website. I.. I.. Noah. Earth.
⛺︎ My Room
iMood:

RSS:

Guild Memberships:

Artifacts:

Re: border-image trouble! css-help!

« Reply #6 on: a Summer night »

Code

.mag { 
 border-image-slice: 581 70 140 121 fill;
border-image-width: 300px 56px 119px 93px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch repeat;
border-image-source: url("https://bennizone.net/funzone/magnemite/mag_border.png");
border-style: solid; 
min-height: 500px;
padding: 300px 56px 19px 93px;
}
<div class="mag">Tested in w3school editor and got text on card</div>


	Logged

Artifact Swap:

ribose
Sr. Member ⚓︎

⚘ ⚘ ⚘ ⚘ ⚘
⛺︎ My Room
StatusCafe: ribose
iMood:

Itch.io: My Games
RSS:

Guild Memberships:

Artifacts:

Re: border-image trouble! css-help!

« Reply #7 on: a Summer night »

Quote from: bennizone on a Summer day

I don't need the box to stay the same height, I don't mind it getting longer. Just not wider

here's how i would do it: https://codepen.io/ribozone/pen/VYPqxLP

if you care about the width of the card and not the height, set the width explicitly in your code and let the height adjust automatically. my example has it set to 225px, and i chose the border-image-widths based on what looks right for that size. if you want the card to be larger or smaller, i would scale the width and the border-image-width values up or down by the same value (e.g. multiple them all by 1.5 or some other number), so the ratios stay the same.

the padding is the part of the code that moves the text away from the edges of the container and into the position you want it to be, and those values should be close to what the border-image-width values are. in Noah_S's version above, they match exactly, and in my version there's a few pixels extra added to the left and right padding.

i also changed the border-image-slice values to percentages and moved them near the end, because they should work fine no matter the size card you choose!


	Logged

Artifact Swap:

Pages: [1]

« previous next »