Advertisement:

Author Topic: Full width banner - automatically scales to any screen size  (Read 46452 times)

Offline landyvlad

  • Jr. Member
  • **
  • Posts: 273
    • Michael Reed on Facebook
    • GSX1400 Owners ORG
Re: Full width banner - automatically scales to any screen size
« Reply #40 on: February 27, 2017, 08:22:58 AM »
Thanks I'll have a go.
Please do not PM, IM or Email me with questions on astrophysics or theology.  You will get better and faster responses by asking homeless people in the street. Thank you.

Offline jeannepatrickson

  • Newbie
  • *
  • Posts: 1
Re: Full width banner - automatically scales to any screen size
« Reply #41 on: March 13, 2017, 09:56:10 AM »
Hi,

That's a great post.

I've a doubt. Is there any option for adding alt text for background images.

I know it's an off-topic. Can any one help me on this.

Offline Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 54,985
  • Gender: Male
    • Kindred-999 on GitHub
Re: Full width banner - automatically scales to any screen size
« Reply #42 on: March 13, 2017, 09:58:36 AM »
no. background images do not have alt-text at all in HTML code
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

Offline Arantor

  • Resident Overthinker
  • SMF Friend
  • SMF Legend
  • *
  • Posts: 67,873
    • Arantor on GitHub
Re: Full width banner - automatically scales to any screen size
« Reply #43 on: March 13, 2017, 10:08:13 AM »
You can do some voodoo to have text there and just pushed out of sight so screen readers can do it, but it's... not entirely straightforward.
To assume is to hope that those who came before had the presence of mind and capacity to implement the dreams of those who would come after.

You either die a hero or live long enough to see yourself become the villain. It seems you have chosen which, and now I must do the same.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #44 on: March 13, 2017, 05:36:07 PM »
Oh? Do tell. :D

Offline Arantor

  • Resident Overthinker
  • SMF Friend
  • SMF Legend
  • *
  • Posts: 67,873
    • Arantor on GitHub
Re: Full width banner - automatically scales to any screen size
« Reply #45 on: March 13, 2017, 05:47:19 PM »
text-indent: -9999em ;)
To assume is to hope that those who came before had the presence of mind and capacity to implement the dreams of those who would come after.

You either die a hero or live long enough to see yourself become the villain. It seems you have chosen which, and now I must do the same.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #46 on: March 13, 2017, 11:52:44 PM »
Yes I know that trick (and there are other ways of doing it too*) but the question was about CSS background images. ;)

*visibility: hidden; or
position: absolute; z-index: -99; or
height: 0; overflow: hidden; or...

Offline Arantor

  • Resident Overthinker
  • SMF Friend
  • SMF Legend
  • *
  • Posts: 67,873
    • Arantor on GitHub
Re: Full width banner - automatically scales to any screen size
« Reply #47 on: March 14, 2017, 01:38:33 AM »
Same deal. An element with a background image can still have textual content with its text shoved out of sight and get the benefits of both.
To assume is to hope that those who came before had the presence of mind and capacity to implement the dreams of those who would come after.

You either die a hero or live long enough to see yourself become the villain. It seems you have chosen which, and now I must do the same.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #48 on: March 14, 2017, 02:55:30 AM »
Well yes, although the question was strictly about having an alt tag on a background image. IOW, something that would be visible if the image 404'd, or if images were disabled in the browser, which is not possible AFAIK.

Having non-visible text in most HTML elements is easy enough. There are umpteen ways of doing that. You can even just use color: rgba(0,0,0,0); if you like. That'll work.

Offline Arantor

  • Resident Overthinker
  • SMF Friend
  • SMF Legend
  • *
  • Posts: 67,873
    • Arantor on GitHub
Re: Full width banner - automatically scales to any screen size
« Reply #49 on: March 14, 2017, 03:37:33 AM »
I assumed it was for the infamous SEO purpose where it would actually work better than an alt tag.
To assume is to hope that those who came before had the presence of mind and capacity to implement the dreams of those who would come after.

You either die a hero or live long enough to see yourself become the villain. It seems you have chosen which, and now I must do the same.

Offline edi1967

  • Semi-Newbie
  • *
  • Posts: 15
Re: Full width banner - automatically scales to any screen size
« Reply #50 on: April 22, 2017, 06:21:14 AM »
very nice tips thx but i have one little question, if i want my banner forum more little in size how i can edit your code?

i mean my banner begin very big using your code i want that will be more little in size, please let me know how i can edit code

here my site for view

http://ediboard.altervista.org/index.php [nofollow]

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #51 on: April 22, 2017, 05:56:27 PM »
The short version is: instead of setting width to 100%, set it to something smaller.

Try playing around with that first. See how you go.

Offline edi1967

  • Semi-Newbie
  • *
  • Posts: 15
Re: Full width banner - automatically scales to any screen size
« Reply #52 on: April 23, 2017, 06:45:35 AM »
The short version is: instead of setting width to 100%, set it to something smaller.

Try playing around with that first. See how you go.

thx you for your reply i tried to :

Code: [Select]
.forumtitle>a>img
{
width: 80%;


Edit width to 80% and logo begin more little but is not centered, you can suggest me how decrease width but mantain the logo centered?

thx you so much Antechinus

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #53 on: April 23, 2017, 07:57:03 PM »
Code: [Select]
.forumtitle>a>img
{
width: 80%;
margin: 0 auto;
}

Not tested, but should work.

Offline edi1967

  • Semi-Newbie
  • *
  • Posts: 15
Re: Full width banner - automatically scales to any screen size
« Reply #54 on: April 24, 2017, 03:58:42 AM »
Code: [Select]
.forumtitle>a>img
{
width: 80%;
margin: 0 auto;
}

Not tested, but should work.

tried but dont work :(

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #55 on: April 30, 2017, 04:06:51 AM »
Ok, use this:

Code: (Find) [Select]
.forumtitle>a>img
{
width: 100%;
height: auto;
border-radius: 5px 5px 0 0;
}

Code: (Replace) [Select]
.forumtitle>a
{
display: block;
width: 50%;
margin: 0 auto;
}
.forumtitle>a>img
{
width: 100%;
height: auto;
border-radius: 5px 5px 0 0;
}

That will give a banner that is half the width of the header. If you want it 80% the width of the header, change 50% to 80%.