Full width banner - automatically scales to any screen size

[landyvlad]

Thanks I'll have a go.

[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

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

[Antechinus]

Oh? Do tell.

[Arantor]

text-indent: -9999em

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

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

[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]

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 Expand

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

Code Select Expand

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

Not tested, but should work.

[edi1967]

Code Select Expand

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

Not tested, but should work.

tried but dont work

[Antechinus]

Ok, use this:

Code (Find) Select Expand

.forumtitle>a>img
{
width: 100%;
height: auto;
border-radius: 5px 5px 0 0;
}

Code (Replace) Select Expand

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