• Welcome to Simple Machines Community Forum. Please login or sign up.
December 06, 2021, 09:44:22 AM

News:

SMF 2.0.18 has been released! Please update. Read more.


Full width banner - automatically scales to any screen size

Started by Antechinus, June 18, 2014, 04:52:28 AM

Previous topic - Next topic

landyvlad

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.

To paraphrase Kindred: "There are no technical solutions to social problems."

jeannepatrickson

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.

Kindred

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.<br /><br />"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Arantor

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.
No good deed goes unpunished
All helpful urges should be circumvented


Arantor

No good deed goes unpunished
All helpful urges should be circumvented

Antechinus

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...

Arantor

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.
No good deed goes unpunished
All helpful urges should be circumvented

Antechinus

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.

Arantor

I assumed it was for the infamous SEO purpose where it would actually work better than an alt tag.
No good deed goes unpunished
All helpful urges should be circumvented

edi1967

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]

Antechinus

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.

edi1967

Quote from: Antechinus 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.

thx you for your reply i tried to :

.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

Antechinus

.forumtitle>a>img
{
width: 80%;
margin: 0 auto;
}


Not tested, but should work.

edi1967

Quote from: Antechinus on April 23, 2017, 07:57:03 PM
.forumtitle>a>img
{
width: 80%;
margin: 0 auto;
}


Not tested, but should work.

tried but dont work :(

Antechinus

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%.

Advertisement: