Member Avatar for kv79

Hi ,i have a little problem ,
Do you know how to set background image but i have frames .
I split my site into frames and i try to set a background image but i fail .
So if you know ,how to set a background image with in the 3 frames ?


Thank you for your effort of reading .
If i did not explain , so please let me know if you do not know what i am writing about .

  • 5 Contributors
  • 12 Replies
  • 130 Views
  • 5 Months Discussion Span
  • Latest Post Latest Post by topsege2007

Dani AI

Generated

As described, the challenge comes from using frames: each frame is its own document, so a single full-page image does not automatically span them. and pointed in the right directions — moving away from frames is the best long-term fix. Below are practical, modern options and a few concrete tips you can apply today.

A straightforward modern solution is to replace frames with a CSS layout (header/nav/content/footer or three columns). Set the page background on the top document and let content panels sit on top. Example (minimal):

<!DOCTYPE html>
<html>
<head>
<style>
html,body { height:100%; margin:0; }
body {
  background: url('images/bg.jpg') no-repeat center center fixed;
  background-size: cover;
}
.container { display:flex; min-height:100%; }
aside { width:200px; }
main { flex:1; }
</style>
</head>
<body>
  <div class="container">
    <aside>Left</aside>
    <main>Main</main>
    <aside>Right</aside>
  </div>
</body>
</html>

Using background-size: cover makes the image scale to fill the viewport. See MDN for background sizing and layout basics: background-size and Flexbox guide.

If you cannot remove frames, there are two realistic approaches that preserve appearance:

  • Make each framed document render a transparent background (so a parent-layer image could show through when using iframes). Some browsers require special handling; ensure the framed pages set background: transparent on their html/body.
  • Or use the same single image in each frame but shift the CSS background-position in each framed page so the pieces line up visually. That keeps one source image and only requires careful offset math based on frame sizes.

For hover effects, prefer CSS :hover rules rather than inline JavaScript. Keep image paths relative to each file’s location (a common source of "it works on one frame but not another"). Also check DOCTYPE and test in modern browsers — frames are legacy and cause accessibility and responsiveness problems, so migrating will save time later.

Recommended Answers

All 12 Replies

Member Avatar for orko

three frames mean 3 different page. What you can do is, divide the image into three different files. and set them as background for your three different background. You can use css extensively to make it look like one single background.

Member Avatar for kv79

In this page i have

but i do not know what are you thinking when you wrote divide image .It is a pretty hard to do when i have 3 frames .
And i do not have any ides how to use css ?

Member Avatar for somedude3488

do you really have to use frames. a css layout would be easier and make adding the background a simple task.

Member Avatar for kv79

NO, i do not need to use frames , can you instruct me how to use css layout ?

Member Avatar for somedude3488

a css layout is very easy to design and maintain. first you will have to learn css, a very simple language. just search for some tutorials online and you can learn everything you need to know. after that its just plain html.

Member Avatar for orko

There is two way to solve ur problem without frame. One is to use table and the other one is to use css. table is easier but can be messy if you have a lot of stuffs.
CSS has different solutions. One is to put your three part inside three divs. Set the position of the divs so that it appears exactly how you want to see it. Plus set the background of your body. Make the div transparent so that the backgrounds are visible. If you want to learn more about div, google css div.

Member Avatar for kv79

In fact ,i want that my page look more live .
For example ,when i cross over the table that something change ,when i cross over my title of my frames that something happen .
What i need to do, to get that ??

Thank you for your effort of reading and replying on my messages .

Member Avatar for orko

this is called hover effect in css. you can read .

Member Avatar for kv79

Sorry , but that is not helpful for me orko.

Member Avatar for somedude3488

that effect you are looking for can be done with css styling but you need to use javascript to make it work.

use this in the containing tag of the title text

onmouseover="this.className='style2'"

and for mouse out

onmouseout="this.className='style1'"
Member Avatar for prabuit2000

anyone can explain how to set background image use css.?

Member Avatar for topsege2007

to set a background image is easy. in the frame u desire to work on type <body background="the image name.jpg"> but you have to make sure that the image in question is available on the same folder.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.