More flexible background image?

  • abetterusername

    (@abetterusername)


    17 years, 7 months ago

    I saw my site on a very large monitor yesterday, and my background image was a sad little island floating in a big sea of gray. I’ve seen people mention a blob of javascript that will check monitor resolution and resize the background image accordingly, but not how it’s done. If you happen to know, I’ll hug you or buy you a lollipop or something. Other solutions would be equally appreciated.

    It’s fasruith.com, by the way.

Viewing 13 replies - 1 through 13 (of 13 total)
  • Thread Starter abetterusername

    (@abetterusername)

    17 years, 7 months ago

    I found something that looks promising

    http://www.htmlite.com/faq022.php

    but so far I’m not smart enough to figure out how to plug it into WordPress.

    vkaryl

    (@vkaryl)

    17 years, 7 months ago

    If you’re doing browser sniffing, whether for the browser itself or for the resolution thereof, you generally plug that sort of script into the <head></head> tagset in the header.

    Thread Starter abetterusername

    (@abetterusername)

    17 years, 7 months ago

    Every time I guess and touch something, it breaks everything. Am I putting the HTML on the header page and the div information on the stylesheet?

    vkaryl

    (@vkaryl)

    17 years, 7 months ago

    Sniffers are generally js, not html. If you do a js sniffer script in the header.php, you shouldn’t need a div etc. anywhere. What you are needing is completely different stylesheets for each res, which will make your blog display the way you want it.

    You test for that info (the res the user is operating at) with a sniffer script. Then depending on the result you feed the user a different stylesheet.

    Thread Starter abetterusername

    (@abetterusername)

    17 years, 7 months ago

    It’s css and html. The idea is to make a div that’s got the image you want to use at 100%, then put it under everything else.

    You were right about it being the header, but now I have a whole new batch of problems. I can’t get the z-index code to work at all. The image just floats on top of all the content, even when I individually list every div as having a higher position.

    Thread Starter abetterusername

    (@abetterusername)

    17 years, 7 months ago

    Okay, the problem is that I was working in the header and only setting header divs to z-index:1. Can anybody think of a way to easily set all content as z-index:1? Or to indicate somehow that site wide the bgimg div is z-index:0 or otherwise set the div to layer under the others?

    Thread Starter abetterusername

    (@abetterusername)

    17 years, 7 months ago

    I am finally about to contribute something to these forums, and nobody’s awake. šŸ™

    Okay, the new problem is that, I can do it all from the header, but the sidebar and footer get weirdly bumped specifically off the edges of the screen. I think what it means is, this is working but is constrained by the fact that it’s on the header page. It’s making header.php and all it contains the size of the entire page, and pushing the sidebar and footer out. On the other hand, the header and footer images also recenter to the size of the new page, portions of which aren’t visible without scrolling, so that kinda says it might not be what it’s doing.

    This is giving me a headache, since I manually went through the styles and set every single div to x, y, and z-index:1, and set the background image div to x, y, and z-index:0. None of that mattered. All that matters is the z-index of styles on the header page where the actual bgimg div is.

    I need it looking decent in case any of my teachers visit it tomorrow, so I’ve taken what I did down and just left it white for now.

    Can you think of where I would put the bgimg div and its styles that would let it effect the whole page, instead of just the main area?

    Pizdin Dim

    (@pizdin_dim)

    17 years, 7 months ago

    “I’ve seen people mention a blob of javascript that will check monitor resolution and resize the background image accordingly.”

    Checking monitor resolution is useless because it doesn’t tell you the actual window size of the client browser. It will only work if the human using the browser is running it maximised, which you shouldn’t assume.

    A better way to do it, like ABetterUsername suggested, is with CSS.

    Thread Starter abetterusername

    (@abetterusername)

    17 years, 7 months ago

    pizdin_dim:

    Checking monitor resolution is useless because it doesn’t tell you the actual window size of the client browser. It will only work if the human using the browser is running it maximised, which you shouldn’t assume.

    A better way to do it, like ABetterUsername suggested, is with CSS.

    I feel like I’ve tried everything now.
    No matter what I do or where I put it, the sidebar and footer just plain don’t like the background image div. I can get it below everything else, but for some reason it pushes the footer and the sidebar out of the way. It doesn’t cover them up, it just shoves them.

    Are they in some kind of seperate frames or something?

    Pizdin Dim

    (@pizdin_dim)

    17 years, 7 months ago

    No, they’re not in frames or anything like that. The htmlite link you provided is a good tip. Try adapting it like this:

    1. Change the “bg_image” element in your stylesheet (style.css) to have a height that matches your “head.gif” file:

    #bg_image {
    width: 100%;
    height: 86px;
    left: 0px;
    top: 0px;
    position: absolute;
    z-index: 0;
    }

    2. Change the “img” tag in your theme (probably index.php) from this:

    <a href="http://www.fasruith.com"><img src="http://www.fasruith.com/wp-content/themes/veryplaintxt/head.gif" align=center border=0></img></a>

    to this:

    <a href="http://www.fasruith.com"><img src="http://www.fasruith.com/wp-content/themes/veryplaintxt/head.gif" border="0" style="width: 100%; height: 100%"></img></a>

    3. Remove all instances of “x-index” and “y-index”, they don’t mean anything in CSS, from what I remember.

    alys

    (@alys)

    17 years, 7 months ago

    I think the problem will be solved if you place this in your css.

    background: #whatevercolouryouwant url(http://mysite.com/background.gif) no repeat fixed;

    I don’t really understand the problem, but a while a go I was using a rainbow background (pink-blue). Whenever I went full screen on firefox the original pink colour was visible if you scrolled down beyond the blue.

    By fixing the background, however much you scroll down the background will stay in the same place.

    Does that help?

    Thread Starter abetterusername

    (@abetterusername)

    17 years, 7 months ago

    pizdin_dim:
    That’s my header image.
    Also, why change the style from 100% to 86px? We’re trying to make a div with an image in it that will stay 100% both directions in any resolution.

    Alys:
    That’s what I’ve been doing, only when I saw my site on a large monitor, I realized that at very high res a fixed background image is just centered in the page. On a small page, you only see part of a background image. I really like the way it looks, and I’d like it to look the same way everywhere, so I’m trying to make an elastic background image. I found a way to do this using css and html. Now I’m trying to figure out how to make it work with WordPress.

    And here’s where things get VERY ODD. I got it to work, and then it quit working. What made it work was dropping the div with the actual image on the index page and, ARGH!, setting the style z-index to -1. It took seven hours for me to realize that maybe you could go below zero with a layer. And it really, really did work. Perfectly. Looked just like a background image, only I could resize the window any which way and the image got larger and smaller with it. I got to see it working this way many times.

    I noticed my text had shrunk somewhat, and thought it puzzling, but didn’t pay much attention. Then, I noticed that my background image had “short pants” if the page loaded in any way other than clicking reload. Like, clicking one of the internal links back to the index made the background image too short. It was retaining its scale for some reason. Like, the purportions of the background image stayed the same and so it didn’t fill the page. But if I just clicked reload, it continued working right (didn’t scale). Again, I did this many times.

    And then, all of a sudden, my font returned to its normal size and the background image never reaches 100% vertically anymore no matter what. Also, it’s no longer scaling when I resize the window. Bear in mind, there’s no reason for a background image to even appear except for that div, so it’s not like I’m seeing a “real” background image — I took it out before I started all this.

    To make matters EVEN WEIRDER, some of my theme’s default settings that I changed WEEKS AGO have come back. Styles I haven’t been anywhere near.

    I have no idea what’s going on anymore. It’s like I have a haunted website.

    Does WordPress ever “fix itself” or something?

    Pizdin Dim

    (@pizdin_dim)

    17 years, 7 months ago

    “Also, why change the style from 100% to 86px? We’re trying to make a div with an image in it that will stay 100% both directions in any resolution.”

    Because that’s the height of the header image file.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘More flexible background image?’ is closed to new replies.