/    Sign up×
Community /Pin to ProfileBookmark

Background position

Copy linkTweet thisAlerts:
Jul 14.2003

Hi,i have a problem with the backgrounds.I read all the tutorials here,but none of them explains what i need to know.I made a test page here: [url]http://elpin.scifi-meshes.com/test.htm[/url]
Try to move the borders of the frames or resize the window of the browser.See what it is doing?The background (tiled orange squares) is moving where the frames are connected.I used Style sheets to attach the background to the left edge,right edge, top, bottom – many combinations, but what i really need is to ABSOUTELY FIX the background so it doesnt move even if you resize the window or move the borders of the frames. Pleaes,could you help me? Thank you in advance.

to post a comment
HTML

15 Comments(s) ↴

Copy linkTweet thisAlerts:
@David_HarrisonJul 14.2003 — background:fixed; should do it.

Edit: Although I'm not sure how IE will handle it.
Copy linkTweet thisAlerts:
@ElpinauthorJul 14.2003 — unfortunately, background: fixed, works only when you are scrolling. At least for me - i use IE. But thanks for help.
Copy linkTweet thisAlerts:
@David_HarrisonJul 14.2003 — Oh sorry, I just checked your page and I see the problem now. What you could do is to have a page with an iframe in the middle of it, so that the background would stay put while the iframe is resized.
Copy linkTweet thisAlerts:
@ElpinauthorJul 14.2003 — iframe? Never heard of it. Could you explain it please?
Copy linkTweet thisAlerts:
@David_HarrisonJul 14.2003 — An iframe is an inline frame that can be positioned where you want it on the page. This is how you can use it:

<iframe src="page.html" name="hello" width="200" height="200" frameborder="1" scrolling="auto">Content that appears if iframes are not supported.</iframe>
Copy linkTweet thisAlerts:
@ElpinauthorJul 14.2003 — Thanks a lot! Now i dont need to have any frames there! Just one iframe. Huh, that has to be something new, because Macromedia Dreamweaver is not supporting it, nor MS Frontpage...

Could you please tell me how to position the iframe on the page? What code do i need to write there?
Copy linkTweet thisAlerts:
@David_HarrisonJul 14.2003 — Well you could do one of 3 things:

  • * Create a simple table to contain it in the correct position on the page, but that would make the iframe un-resizeable.


  • * position it absolutely, inside the iframe tag put this:


    • style="position:absolute;top100px;left100px;"

    feel free to change the numbers?.

    However this will pull the iframe out of the flow of content and would therefore allow other content to be displayed either under or over it (depending on whether the content is coded before or after the iframe).

  • * Use a lot of div tags to contain all of your content (this may be the easiest and best option), making sure that %age's are used for dimentions wherever possible. The div containing the iframe [B]theoretically[/B] should stretch to contain it and also push the div's around it out of the way so that no content is hidden.
    • Copy linkTweet thisAlerts:
    @ElpinauthorJul 14.2003 — Ahh, ok, thanks again!
    Copy linkTweet thisAlerts:
    @David_HarrisonJul 14.2003 — Actually having thought about it tables may work, however the W3C don't recommend them for layout.

    If you want me to have a go at making a layout with div's, just give me some dimentions of area's and I'll have a stab.
    Copy linkTweet thisAlerts:
    @ElpinauthorJul 15.2003 — You are very kind, but id like to learn it on my own. I just need a few advices ?

    I used iframes as you told me and the result is very good. Just one thing. I dont know how to use "divs" and because i need the iframe to be resizable and all the text on the page will be only in that iframe, id like to use the second option you told me, but are you sure that [b]style="position:absolute;top100px;left100px;"[/b] is right? Because when i add this to the iframe tag, it doesnt do anything. This is the complete line i use:

    <iframe src="galerie.html" name="hlavni" width="760" height="400" frameborder="1" scrolling="auto" style="position: absolute; top100px; left100px;">Content that appears if iframes are not supported.</iframe>
    Copy linkTweet thisAlerts:
    @ElpinauthorJul 15.2003 — Also, could you tell me how to make the iframe to resize when the whole browser window is resizing?

    Look here: www.jafr.cz/pokus

    Thats the original site i made with many frames. Its working properly (only the background is wrong). Try to resize the browser window. You will see the central - white frame is resizing also, thats what id like to achieve with iframe. Could you tell me how to do this?
    Copy linkTweet thisAlerts:
    @David_HarrisonJul 15.2003 — I made this, (see attachment), it uses a table of 100% width and a three td cells to contain the iframe. The middle td cell is the one with the iframe in and there are two other td's at the sides that change size to keep the iframe centered. If the window is resized too small for the iframe width, the iframe shrinks.

    It works in IE 6, Netscape 7 and Opera 7.

    This should work for you but if it doesn't let me know and I'll try something different.

    Oh, and one last point, I used tables so that you no longer need to worry about absolute positioning, you can just insert this table where you want the iframe and let the browser worry about where it should go.

    [upl-file uuid=da97872a-7144-464a-b2aa-fdb81825108f size=481B]iframe.txt[/upl-file]
    Copy linkTweet thisAlerts:
    @ElpinauthorJul 15.2003 — Thank you very much! Thats exactly what i wanted to know. Now when i understood how this works, i also applied the same procedure for height resizing and everything is great! Thanks again!

    Now when this is solved, could i ask you another question about scroll bars? I know how to assign a specific color to them, but what id like to know is if there is a way to not assign them a [b]specific[/b] color, but rather a gradient made by two or more colors... Is it possible?
    Copy linkTweet thisAlerts:
    @David_HarrisonJul 16.2003 — I'm afraid that I don't know much about changing the colour of scroll bars, so you may be better asking this question in the CSS forum.
    Copy linkTweet thisAlerts:
    @ElpinauthorJul 16.2003 — OK, thanks anyway...
    ×

    Success!

    Help @Elpin spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.19,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...