Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS resize float bar image based on resolution

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #26945
    isaac_cm
    Participant

    Hello,
    I want to make a float bar image at the bottom of my site and I used the following CSS

    Code:
    .myFloatBar{
    bottom:0;
    left:0;
    width:100%;
    height:700px;
    position:fixed;
    background:url(xmas.gif) no-repeat fixed bottom;
    }

    the problem that it looks fine in resolution of 1024×768 but when the resolution is 800×600 the image appear cropped , any solution for that ?

    thanks

    #67143
    AshtonSanders
    Participant

    How big is xmas.gif? is it 700 px tall? If not, why is this .myFloatBar 700px tall?

    Other Idea: Why don’t you just apply your background code (background:url(xmas.gif) no-repeat fixed bottom;) to <body> ? (or are you trying to get this image to overlap of the rest of the website?

    Do you have a link?

    Also: most web visitors these days don’t have 800×600… I still worry about IE6, but not that screen size.

    #67151
    isaac_cm
    Participant

    Hello,
    – The 700 px is wrong I omitted it
    – I need to overlap the image it is transparent png image
    – I dont have a web site yet but here is online link http://hotfile.com/dl/18878588/1cf5ef6/ … r.rar.html

    Thanks and looking for your replay

    #67047
    AshtonSanders
    Participant

    Hi,

    strangely enough, I can’t open RAR files. Can you just copy your code into the forum?

    #67163
    isaac_cm
    Participant

    Hello,
    it seems you use very old winrar

    here is my html

    Code:




    Happy Christmas

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text

    Some Text


    CSS

    Code:
    div#footer {
    height:170px;
    bottom:0px;
    position:fixed;
    width:100%;
    background:url(xmas.png) no-repeat fixed bottom left;
    background-position:left:0px;
    }

    #page {
    margin:0;
    width:950px;
    }

    #67168
    AshtonSanders
    Participant
    "isaac_cm" wrote:
    it seems you use very old winrar

    yea, that or I don’t have winrar. ;)

    Okay, here’s some notes:

    1- Your CSS doesn’t have the .myFloatBar. Is that the CSS you are using on your site?
    2- Your div is actually:

    Code:

    Why do you have the underscore at the end?
    3- I would recommend putting a "&nbsp;" inside every "empty" div.

    #67175
    isaac_cm
    Participant

    hello,
    I added "_" just while trying to tweak the CSS plz ignore, I still waiting for your recommendation about resize the floating bar

    #67177
    AshtonSanders
    Participant

    Oops, you missed this question:

    "AshtonSanders" wrote:
    1- Your CSS doesn’t have the .myFloatBar. Is that the CSS you are using on your site?
    #67178
    AshtonSanders
    Participant

    ooooh, I think I get the problem.

    How wide is the image you have in the footer?

    Since it’s a background image, it will always remain the same size…. so when you decrease the size of the screen, it will hide some of the image. You can stretch the image to always be 100% width, but on the larger monitors it will most likely look pixelated and stretched.

    The code for that would be something like this:

    HTML:

    Code:

    CSS:

    Code:
    .myFloatBar{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    }
    #67216
    isaac_cm
    Participant

    so there is no way to get it resized on different resolution with the save of aspect ratio ?

    #67223
    AshtonSanders
    Participant

    Hehe. semi-Correct.

    There is no way to stretch an image to be 1600px wide without loosing quality, unless the image is 1600px wide. If a 1600px picture is decreased to 1000px wide, it *should* still look good. Try that.

    #67236
    isaac_cm
    Participant

    thanks

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.