Envision, Create, Share

Welcome to HBGames, a leading amateur game development forum and Discord server. All are welcome, and amongst our ranks you will find experts in their field from all aspects of video game design and development.
Register

Putting text on image or changing background size?

Latest Post

Shadow32o

Member

89
What I am looking for is a way to either resize a background image or make an image act as a background image so that text can be put on it and the image can be scaled down as needed...instead of making the image with the text on it (which I will end up doing as a last resort). Post here is you have any other questions...(I tryed to make this as clear as possible)

Thanks in advance :smile:
 

Tdata

Sponsor

528
HTML: 
<div class="html" id="{CB}" style="font-family: monospace;"><ol> 

<span style="color: #009900;">[url=http://december.com/html/4/element/span.html]<span style="color: #000000; font-weight: bold;"><span[/url] style="background-image:url();"<span style="color: #000000; font-weight: bold;">><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">

 

Now are you talking about a tileable image or actually resizing a whole image?
 

Kelevra

Sponsor

82
Shadow32o":1zziibg1 said:
What I am looking for is a way to either resize a background image or make an image act as a background image so that text can be put on it and the image can be scaled down as needed...instead of making the image with the text on it (which I will end up doing as a last resort). Post here is you have any other questions...(I tryed to make this as clear as possible)

Thanks in advance :smile:
Click to expand...

Background Image

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<style media="all" type="text/css">

body {background:url(your image.png); }

</style>

</head>

 

<body>

<font size="5">MY FAT TEXT ON IMAGE</font>

</body>

</html>

Preview:

sample_brows.jpg
 

Tohsaka

Sponsor

144
Use the CSS Property of background-image:url('path/to/image') as he said above.

You can include it in either the HTML file itself, or an external CSS stylesheet. I suggest that you use it on "body".
 

Kelevra

Sponsor

82
Cocoa":dyja86eu said:
Use the CSS Property of background-image:url('path/to/image') as he said above.

You can include it in either the HTML file itself, or an external CSS stylesheet. I suggest that you use it on "body".
Click to expand...

Actually not all browsers read the CSS property "background-image" it is better to use body {background:url(your image.png); } simply because all browsers read it and it works the same as "background-image" or "background-color."
 

Glitchfinder

Staff

1,504
Hebi Kumo":3jg4xpov said:
Cocoa":3jg4xpov said:
Use the CSS Property of background-image:url('path/to/image') as he said above.

You can include it in either the HTML file itself, or an external CSS stylesheet. I suggest that you use it on "body".
Click to expand...

Actually not all browsers read the CSS property "background-image" it is better to use body {background:url(your image.png); } simply because all browsers read it and it works the same as "background-image" or "background-color."
Click to expand...

I remember one point where I was testing the CSS background-image property. If I remember correctly, it worked in IE6, IE7, Firefox (The last several versions at least), and Safari. No guarantees about odd things like the weird browser on the Nintendo Wii, but it should work in most current browsers.
 

Kelevra

Sponsor

82
Glitchfinder":21mu0vyd said:
Hebi Kumo":21mu0vyd said:
Cocoa":21mu0vyd said:
Use the CSS Property of background-image:url('path/to/image') as he said above.

You can include it in either the HTML file itself, or an external CSS stylesheet. I suggest that you use it on "body".
Click to expand...

Actually not all browsers read the CSS property "background-image" it is better to use body {background:url(your image.png); } simply because all browsers read it and it works the same as "background-image" or "background-color."
Click to expand...

I remember one point where I was testing the CSS background-image property. If I remember correctly, it worked in IE6, IE7, Firefox (The last several versions at least), and Safari. No guarantees about odd things like the weird browser on the Nintendo Wii, but it should work in most current browsers.
Click to expand...

Well that's what I ment was older versions of browsers.
 

Glitchfinder

Staff

1,504
Hebi Kumo":y6c5gtac said:
Well that's what I ment was older versions of browsers.
Click to expand...

I see. Still, why bother doing something like programming for IE4, or Netscape? (Well, a lot of people still use netscape, but I think you ge the point.) The most common older browsers are older versions of IE, and Microsoft regularly asks users to update it. (Not that it does much good with some people)
 

Tohsaka

Sponsor

144
The reason why people still use older versions of the browser is because there are still people making sites and pages that are compatible with it. As an example, transparent PNGs don't work, and now we've even got Animated PNG.
 

Kelevra

Sponsor

82
Yes I recently made a template and submitted it for critique. I got a 4/5 and was told it would have been 5/5, but I did not make it compatible with older browser versions. So people still use them, not me though I have 8 browsers on my computer for testing, but all new versions.
 

Glitchfinder

Staff

1,504
Cocoa":1z2jub91 said:
The reason why people still use older versions of the browser is because there are still people making sites and pages that are compatible with it. As an example, transparent PNGs don't work, and now we've even got Animated PNG.
Click to expand...

You know, the last time I tested things, the only browser that supported transparent .PNG files was IE7. That was about a year ago, however, and things probably have changed since then.
 

Glitchfinder

Staff

1,504
Cocoa":3l07m0jp said:
IE4/5/6 don't have it as I recall. It works in Firefox, Safari and Opera, and IE7 now.
Click to expand...

OK, so they've updated Firefox, Safari, and Opera. I guess IE7 was the first to implement it, as that was the only one that displayed them properly when I tested them about a year ago.
 

e

Sponsor

405
Any WebKit, KHTML and Gecko based browser should support PNG transparencies, as well as any IExplore based browser (with the IE7+ engine). IE6 and backwards have weird ass filters that allow you to do it and you can always define custom behaviors with HTC files.
 
You must log in or register to reply here.

Share this page

Thank you for viewing

HBGames is a leading amateur video game development forum and Discord server open to all ability levels. Feel free to have a nosey around!

Discord

Join our growing and active Discord server to discuss all aspects of game making in a relaxed environment. Join Us

RPG Maker

  • Support & Help
    •
  • Tutorials
    •
  • Plugins - MZ, MV
    •
  • Scripts - Ace, VX, XP
    •
  • Resources
    •

    Content

  • Our Games
    •
  • Games in Development
    •  Emoji by Twemoji.
    Top