Odd way to text overlay? Topic is solved

This forum is for general questions about extensions for Joomla! 3.x.

Moderators: pe7er, General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Post Reply
TheINIC
Joomla! Intern
Joomla! Intern
Posts: 88
Joined: Thu Feb 17, 2011 5:27 am
Location: Earth - but that too is temporary.
Contact:

Odd way to text overlay?

Post by TheINIC » Wed Apr 10, 2019 9:39 pm

Thanks for being here,

Preamble:
I searched far and wide, and even Googled it too, and the ways and means do not fit what I hoped would be a common tool. So I ask here.

OBJECTIVE:

Assume there is a table with 1 column and 1 row.
At the far left, is a 60x60 Px image of a circle with the number 4 in it and it's opacity is about 30-40%
Now I want text to start at far left of image and run the width of the responsive page.

So the following example
overlay-2.png
will respond to smaller screens like this
overlay-1.png
and vice versa.

Your help is very much appreciated - REALLY!

i
You do not have the required permissions to view the files attached to this post.
Official Head Computer Whisperer(Someone had to do it.)

User avatar
ranwilli
Joomla! Master
Joomla! Master
Posts: 19131
Joined: Sun Feb 19, 2006 6:47 pm
Location: Toledo, OH
Contact:

Re: Odd way to text overlay?

Post by ranwilli » Thu Apr 11, 2019 1:44 pm

Don't HACK the Joomla! core, Instead "Extend" and/or "Override."
Stay ON the update path.
https://harpervance.com

TheINIC
Joomla! Intern
Joomla! Intern
Posts: 88
Joined: Thu Feb 17, 2011 5:27 am
Location: Earth - but that too is temporary.
Contact:

Re: Odd way to text overlay?

Post by TheINIC » Thu Apr 11, 2019 3:48 pm

ranwilli wrote:
Thu Apr 11, 2019 1:44 pm
See:

CSS Background-image
Thanks. It would be easier just to use a table cell and background than CSS if I wanted to blanket the background with 1 image. I guess my example isn't showing up well on other monitors here maybe?

Thanks anyway,
Your try is really appreciated.
Official Head Computer Whisperer(Someone had to do it.)

SharkyKZ
Joomla! Ace
Joomla! Ace
Posts: 1589
Joined: Fri Jul 05, 2013 10:35 am
Location: Unknown

Re: Odd way to text overlay?

Post by SharkyKZ » Thu Apr 11, 2019 4:15 pm

If you want the background image to be shown only once, set background-repeat property to no-repeat.

TheINIC
Joomla! Intern
Joomla! Intern
Posts: 88
Joined: Thu Feb 17, 2011 5:27 am
Location: Earth - but that too is temporary.
Contact:

Re: Odd way to text overlay?

Post by TheINIC » Thu Apr 11, 2019 8:19 pm

SharkyKZ wrote:
Thu Apr 11, 2019 4:15 pm
If you want the background image to be shown only once, set background-repeat property to no-repeat.
and it sits centre stage does it not - at least I could never get it move. There are a wad of people asking the same question I did, some here (closed), many via searches and Googling. The best I've seen is a DIV but, responsive it is not.

Probably can't be done. Thought I'd make one last try. Check my image examples - and I am betting it can't be done except in Photoshop (aka my example)

Thanks SharkyKZ

i
Official Head Computer Whisperer(Someone had to do it.)

User avatar
ranwilli
Joomla! Master
Joomla! Master
Posts: 19131
Joined: Sun Feb 19, 2006 6:47 pm
Location: Toledo, OH
Contact:

Re: Odd way to text overlay?

Post by ranwilli » Sat Apr 13, 2019 9:39 pm

TheINIC wrote:
Thu Apr 11, 2019 8:19 pm
SharkyKZ wrote:
Thu Apr 11, 2019 4:15 pm
If you want the background image to be shown only once, set background-repeat property to no-repeat.
and it sits centre stage does it not - at least I could never get it move...

Code: Select all

#your_div {
  background: #ffffff(optional) url("img_tree.png") no-repeat left top;
}
Don't HACK the Joomla! core, Instead "Extend" and/or "Override."
Stay ON the update path.
https://harpervance.com

TheINIC
Joomla! Intern
Joomla! Intern
Posts: 88
Joined: Thu Feb 17, 2011 5:27 am
Location: Earth - but that too is temporary.
Contact:

Re: Odd way to text overlay?

Post by TheINIC » Sun Apr 14, 2019 4:53 pm

ranwilli wrote:
Sat Apr 13, 2019 9:39 pm
TheINIC wrote:
Thu Apr 11, 2019 8:19 pm
SharkyKZ wrote:
Thu Apr 11, 2019 4:15 pm
If you want the background image to be shown only once, set background-repeat property to no-repeat.
and it sits centre stage does it not - at least I could never get it move...

Code: Select all

#your_div {
  background: #ffffff(optional) url("img_tree.png") no-repeat left top;
}
No, I want the background image and text to perform as illustrated in the example I gave in my post at the start.
I very much appreciate your effort to help, but even though I've spent many hours reading and searching the Internet and Googling as well, I've no idea what you're talking about with the code you provided. I tried it many different ways (I live on trial and error) to no avail.

Sorry if you thought I knew anything at all :) I just use Joomla 3.(+whatever today's' update version is) and JCE editor and maybe a little HTML here and there, but you are way over my ability so I'll back out and say THANK YOU @ranwilli very much. Ya'll are very kind.

i
Official Head Computer Whisperer(Someone had to do it.)

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 25878
Joined: Mon Oct 27, 2008 9:27 pm
Location: Akershus, Norway

Re: Odd way to text overlay?

Post by Per Yngve Berg » Sun Apr 14, 2019 5:29 pm

You can put the style inline instead of in css

Code: Select all

<div class="span12" style="background: #ffffff url("img_tree.png") no-repeat left top;">....</div>


Post Reply

Return to “Extensions for Joomla! 3.x”