Jump to content
Killersites Community
Kadigan

Background Image Not Displaying Properly

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.

Share this post


Link to post
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)

Share this post


Link to post
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.

Share this post


Link to post
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!

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

I don't if this was a typo on the forum .. but the spaces in the file name should not be there:

@include("zeitgeist home.html")

Should be:

@include("zeitgeist-home.html")

Stef

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×