Jump to content

Background Image Not Displaying Properly


Kadigan

Recommended Posts

Yes, but the problem is that the background image in not visible at all, unless there is some text in the html (currently, the dots). If the dots are removed, the background image (the button) doesn't show up at all. I tried adding height and width to the li, it created the space, but the background image still didn't show up.

Link to comment
Share on other sites

Kadigan, Ben, one of the Admins here, suggested to add height, width, and dispay: block to the a tag. I will try that this evening.

Edited by Andrea
Correction a tag (not li tag)
Link to comment
Share on other sites

It works - I changed your a:link stuff to

 

.navhome a:link {
    background-color: rgba(0, 0, 0, 0);
    background-image: url("zeitgeist_images/buts/nav-home1.png");
    height: 80px;
    width: 157px;
    display: block;
}
 
I haven't had a chance to research all the other background settings you had, but they don't appear to be needed.
Link to comment
Share on other sites

Yay! Thanks so much! Now it's just the "middle" background image that has me confused. :)

 

One thing, though: if I wanted the list images to expand and contract along with the size of the browser window, rather than being fixed in place, would the width: 100% under #navigation ul take care of that so long as I hadn't specified a fixed #wrapper width?

 

Happy Easter, everyone!

Link to comment
Share on other sites

Consider this:

Monitors/resolutions these days are pretty huge. I have two, my big one is at 1600px wide, and there are plenty monitors out there with even higher resolutions. Websites that extend over all that are really hard to read, you almost have to turn your head to follow a line of text. And, if your wrapper extends, everything inside kind of has to follow along, too, or you run into layout problems. I'm not saying it's not doable, it's just not my preference. And since I prefer my sites with a set width, I have no experience with fluid ones.

 

With the middle image issue, I assume you're referring to our problem with losing the transparency when adding the background color which we need to fill in under it, right? Yeah, I don't have anything on that yet, either. Let me ask the experts.

Link to comment
Share on other sites

I agree with Andrea, trying to fill the screen of monitors that are wide screen and uses resolution greater than 1024 is a pain to read. However, you can still make a fluid site and yet keep the design to be no greater than 1024 by using media query.  Depending on what  you are trying to do,  it's possible to just use max-width:1024px but more than likely you will need to use media query if you plan on presenting it to all types devices including mobile and tablets.

Link to comment
Share on other sites

  • 2 weeks later...

I hadn't considered that - thanks for mentioning it. I'll probably go with fixed width or max-width. And thanks for the note on the include, Stefan!

 

But does anyone know of a solution to the background problem?

Edited by Kadigan
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...