1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Is there a way to set the background to fit to a specific position no matter what

Discussion in 'CSS' started by the_green, Feb 11, 2008.

  1. #1
    size of screen it is? I don't know much about CSS, but I'm using it on my Yahoo! mash page, and when I position my background using pixels it is right at where i want it to be, but i know it won't look the same on other screens which are smaller or bigger, so is there a way to set it right at that position no matter what screen it is? Thanks!
     
    the_green, Feb 11, 2008 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You'd have to either post a screenshot of what you want, or post code-- cause it depends on what the image is in, and how your page is set up, and where exactly you want it...

    But I'll give you an example of an image always hugging the right side of the screen...

    <div id="container"> <--this is the big containing div and the whole page is in this
    <img class="blah" src="blah.jpg" height="blah" width="blah" alt="an image depicting teh blah">
    ..more stuff on the page...
    </div>

    I've closed the <img> tag in HTML4 style, not XHTML style, just so you know. I also am not doing this in tables... if your page is tables this answer won't help cause I don't think they work like this.
    Anyway, in css then:
    img.blah {
    float: right;
    margin-right: 10px;
    }

    something later in the css will come along and will clear that float.

    Anyway, if the div called "container" always stays the width of the page, then the img will always stay on the right side (but have 10px worth of space between it and the right side). This of course works in a flex-width page. If you set a width on the container div, then the image can only hug the right side of the container... wherever its right side is. That may not be the side of the screen then.


    *Edit ah yeah you said background... in which case, first, the thing in which that background image is in must reach the right side... so let's say it's the body element. You can do this most easily with background-position.
    CSS:
    body {
    background: #fff url(tehblah.jpg) 100% 50% no-repeat;
    }

    That is the shorthand for background-color, background-image, background-position, and background-repeat all in one. The %'s say, move the image all the way to the right (100%) and the other says, have it halfway down the height of the body. You can also use the words "right center" instead, but don't mix words with numbers. Also, you may hear somewhere that you can just say one number or word and the other defaults to "center" but IE doesn't do this, so you always need two values. The first value is always horizontal and the second, vertical.
     
    Stomme poes, Feb 11, 2008 IP
  3. the_green

    the_green Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Oh so I can set my background to exactly that position with all screens using %? Thanks a lot, i'll try it.
     
    the_green, Feb 13, 2008 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Any unit that works on websites. px, %, em, prolly even pt. Also, words left, right, top, bottom, center. Just don't mix the words with the units.

    When you say "exactly", that's never easy to set because a web page isn't a piece of paper-- it flows around and stuff. So, whenever you say "exactly" you'll have to either mean "exactly in relation to the viewport" or "exactly in relation to this other thing on the page."
     
    Stomme poes, Feb 13, 2008 IP
  5. the_green

    the_green Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Hey, I just tried that out. But I just remembered on my mash page there's comment field so it will change if there's someone comment on it, that's the problem. So is there a way to set the background on a position to the top of the screen like using % and padding top or something? Thanks
     
    the_green, Feb 13, 2008 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I guess it depends on what you mean by "top of the screen". Do you mean top of the web page, or top of the viewport?

    Top of the webpage, you need to set that background on something touching the top of the webpage like the body. Then yeah, first number is horizontal, second number is vertical (so set that at like, 5% or 10px or whatever... that's how far down from the top of its container the image will be).

    Top of the viewport, you still need to stick it in a container that touches the top (like the body), but in this case you'd be looking for background-position: fixed which stops the image from scrolling (except in IE6-- for that one, fixed seems to only work on the body, but no other containers).
     
    Stomme poes, Feb 13, 2008 IP
  7. risoknop

    risoknop Peon

    Messages:
    914
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #7
    body {
    background-image: url("path/img.jpg");
    background-position: center center; // or other...
    background-repeat: no-repeat; // so image will be displayed just once...
    }

    You can use also left, right, top, bottom, distance in px or %... Just remember that 1st value is horizontal position and second is vertical.
     
    risoknop, Feb 13, 2008 IP
  8. the_green

    the_green Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    I tried many ways, just like i thought setting the position of the background using % wont help the background changing when the page change (i tried to add something to it). I tried padding-top and it made my page have a blank on the top, like this: http://hyperfileshare.com/d/dca00b3d
    I want my background to be at this position on my page no matter what size of the screen users have, can someone help me? http://hyperfileshare.com/d/190b05c7
     
    the_green, Feb 13, 2008 IP
  9. risoknop

    risoknop Peon

    Messages:
    914
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Have you read my post?

    That will do it;)
     
    risoknop, Feb 13, 2008 IP
  10. the_green

    the_green Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    I tried your code too, is there path in the url value, if so the background don't show with that in it. And without the path there's no difference with my code. I mean it looks right on my page but i don't think it looks the same with other people with different size of screen.
     
    the_green, Feb 13, 2008 IP
  11. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Sorry green, my internet went out yesterday at work and I think it's still out, but when it comes back, I'll be able to look at your pages. Risoknop and I are pretty much saying the same thing so I'm thinking it's really to do with your specific setup...
     
    Stomme poes, Feb 13, 2008 IP
  12. the_green

    the_green Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    I don't know what container is, cause I just know a little about CSS on a site showing some CSS for yahoo mash, but i guess viewport is what i mean, i think it makes the background look the same with all sizes of screen? But is it put in html cause i can just put CSS on my mash page, there's no field for putting the html for the whole page. So is there a CSS code for it?
     
    the_green, Feb 14, 2008 IP
  13. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Ug, man, I can't see **** in those little jpgs... I can see that there's a big white space on the one, yes, but...

    I don't know what image it is, and I don't know where exactly you want it.

    Viewport means "browser". So, on this Digital Point page, when you scroll up or down, everything moves. They scroll in relation to the viewport. Something set with position: fixed will NOT scroll... um, the Norwegian Cow Guy's site has one of those... if you look in a browser that's NOT IE6, check this page out and scroll up and down: http://www.gunlaug.no/contents/wd_additions_17.html A bit to the right there's a Firefox symbol.

    Otherwise, you would position the image in relation only to the container-- as the page scrolled, the image would move up and eventually offscreen.

    Usually the body is a good choice-- it works in IE6, and so long as none of the other boxes on your page have a background colour to cover it up, it will show through.

    body {
    background: #fff url(whatever.gif) 10px 90% no-repeat;
    whatever other body stuff is already there...
    }

    But I'm always leary of templates... they often puke when you try to change stuff.

    Also, it really depends on how the page was built. If it's liquid width like this Digital Point page, the image would always be 10px from the top and 90% left... that means the browser will always try to have 10% of page width between the image and the right edge, no matter how small or big the browser window is made or the screen resolution. It won't be pixel-perfect placement, esp not with % : )

    If your page is fixed-width, then possibly you could go back to your pixel placement. Fixed width pages force a scrollbar when the window is smaller in width than your page-- so, the image would be in the same spot on the page, but people wouldn't see it until they scrolled to the left. People with screens at least as large as your page would always see the image, but the image wouldn't be in their top right corner necessarily... on a large screen like mine, the right side of your page might be in the middle of my screen (assuming you had say an 800px-wide screen), and thus the image would only be at the top right of your page (about the middle of my screen).

    Does this make sense?

    Otherwise, we'd need to see some code, and what you've got so far. A decent image showing exactly where you want the thingo would be good as well (you could just draw a big red box around where you want it, and what you want covering it or whatever).
     
    Stomme poes, Feb 14, 2008 IP
  14. the_green

    the_green Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Oh man what the hell I can't post links anymore, they said live links and signatures are not available to you yet.
    Anyway about liquid width and fixed width you said it sounds cool, but I don't think there's difference between your code and mine, except for the pixels and %, but even with % my page will change if there's someone comment on it. This is my code:
    body {
    background-image: url("http://i99.photobucket.com/albums/l319/theglassring/chalksandpaint1.jpg");
    background-position: 70px 810px;
    background-repeat: no-repeat;
    }
    By the way my background on my page is the paint with some chalks at the the bottom of the file, I want it to be there with all other contents like my text and module, so can you think of a way to make it like that?
     
    the_green, Feb 15, 2008 IP
  15. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #15
    You can post links, they just won't be clicky-- type it in with spaces or something:

    www. mysite.com

    We can hilite, copy, and paste in our browers...

    Is the image being moved down as something appears above it? (comments?)
     
    Stomme poes, Feb 15, 2008 IP
  16. the_green

    the_green Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    No, the image would be moved down if something appears below it too if we use %, but it won't look the same with other screen using pixels, so I don't know how to solve this.
    Here is my mash page: http:// h1.ripway.com/TheGreen/WhiteDaisyA1.JPG
     
    the_green, Feb 15, 2008 IP
  17. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #17
    *sigh* server not found.

    If the image is being moved around when stuff appears on the page, then the percentages are looking at the size of the body, which is growing-- meaning, the code we've been giving you would keep the image in the same place ON THE DOCUMENT (if you could print the webpage) but NOT in relation to the browser.

    OKay on this image http://download.hyperfileshare.com/download.php?code=190b05c7 I think I'm getting it. You want the chalk to be x-distance from the bottom of the viewport, right? Someone with a 600x800 screen should have it near their bottom (only 600 pixels far down), while I should have it near the bottom of my screen too (about 1200px down).

    I do think you want like what Norwegian Cow guy has done... that little firefox logo is always on the same spot on my screen. The problem is getting IE to pay attention to it.

    I think you should pick a popular resolution (a sin, I know) and have the chalk sit that many pixels down from the top.

    So, let's say most people were surfing with 1025 monitors (which may or may not have fully-open browser windows...) and do
    body {
    background: #fff url(crayonsandstuff.jpg) 150px 650px fixed;
    }
    Hmmm lemme test this...

    Okay sorry for the 300 reference, but is this what you want? http://stommepoes.nl/Tests/fixedposition.html ? Scroll up and down, play with your browser size...
     
    Stomme poes, Feb 15, 2008 IP
  18. the_green

    the_green Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #18
    No no I don't want my background to be fixed when scroll up and down, i just want it to be at the position with the text and near the yellow cat as you can see. But the the thing is I want it to look the same with other screens with all sizes, cause the background would move up and down with smaller or larger screen, so it won't be at that position with the text or maybe will be behind that cat. Actually I figured this would be hard to do, so I wonder if there would be a code for it.
    Here is my page again, there's a space between the http:// and the link name if you didn't notice: http:// h1.ripway.com/TheGreen/WhiteDaisyA1.JPG
     
    the_green, Feb 17, 2008 IP
  19. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #19
    Oh, you want it to look like it is on that image? Always behind the text and above the cat??

    Aha, set the background on that text-containing div! You can set the same positions like we were doing on the body.

    I dunno that name of that div with the text, so I'll call it #textdiv : )

    <div id="textdiv">
    <p>all that text blah blah blah</p>
    </div>

    I dunno if you were going to set a width on that or not--- screens that get really small will not get a scrollbar if you don't set a width on it, and if I were you I'd have a width at least as wide as the background image. That way, yeah, that div itself may move up and down, but the image will move up and down with it because it'll be the div's background. The image will never be behind the cat cause the cat will be pushed down by the text-containing div.

    #textdiv {
    background: url(chalkandstuff.gif) center bottom no-repeat;
    all the other styles for this div including possibly a width;
    }

    Tada. The image should stay at the bottom of that div. You might want to set some bottom padding on the div so there's always some space between the last line of text and the bottom edge of the image.
     
    Stomme poes, Feb 18, 2008 IP
  20. the_green

    the_green Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #20
    It seems work, I don't know the name of the module I wanna put it on, but I tried it with another module seems work fine. But actually I want the bottom of my background to exceed the line of that module a bit, for it feel more flexible, like in this pic:
    http:// h1.ripway.com/TheGreen/untitled2.JPG
    But anyway I think your way works, I'll try to try that on my module. Thanks a lot!
     
    the_green, Feb 18, 2008 IP