WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » HTML (Hyper Text Markup Language) » Background problem

View previous topic View next topic Go down  Message [Page 1 of 1]

1Background problem Empty Background problem Thu Aug 26, 2010 3:08 am

Guest


Guest
Hey all

i am facing a problem.i want to add this image as background to an iframe.
Code:
http://i33.servimg.com/u/f33/14/23/24/21/ipad13.png

My iframe code is this one :
Code:
<iframe src="http://cool-processor.jalbum.net/Ipad-Gallery" height="400" width="500"></iframe>
however the frame does not appear into the image and the image behind it!It just doenst appear!

Help? Neutral

2Background problem Empty Re: Background problem Thu Aug 26, 2010 8:48 am

ankillien

ankillien
Administrator
Administrator
Hi!

I don't think we can apply background to an iframe.
You need to apply the background to the page that you are putting as an iframe. You can use this code for it...

Code:
body {
background : url();
}

3Background problem Empty Re: Background problem Thu Aug 26, 2010 4:07 pm

Guest


Guest
i used this code before you posted,but nothing happened Sad

EDIT:See something http://www.alexbuga.com/v9/#portfolio that portfolio is exactly what i want to do!The Ipad is the bakcground image and i want to put an iframe inside.Why this cant be done? Neutral

4Background problem Empty Re: Background problem Thu Aug 26, 2010 6:02 pm

ankillien

ankillien
Administrator
Administrator
You can create a DIV tag and apply background to it and put the iframe in the div tag. It should work then Very Happy

Some thing like this...

Code:
<div class="ipad">
<iframe src="#" width="" height=""></iframe>
</div>

5Background problem Empty Re: Background problem Thu Aug 26, 2010 6:03 pm

Guest


Guest
if i tell you that i also tested that before i post a topic here? Razz
Doenst work Sad
Try it yourself and if it works give me the code.
But when i tested it it didnt work!
Sad

6Background problem Empty Re: Background problem Thu Aug 26, 2010 6:10 pm

ankillien

ankillien
Administrator
Administrator
Have you added the CSS? I think you know how to add background so I skipped that part.

Code:
div.ipad {
background : url(IPAD IMAGE) no-repeat;
}

Also, adjust width and height of the DIV as well as iframe. It must work that way.

And what exactly doesn't work? Won't it show the background at all or it is misplaced or something?

7Background problem Empty Re: Background problem Thu Aug 26, 2010 6:13 pm

Guest


Guest
it displays only the frame!

8Background problem Empty Re: Background problem Thu Aug 26, 2010 6:23 pm

ankillien

ankillien
Administrator
Administrator
Can you give me the code you are using?

9Background problem Empty Re: Background problem Thu Aug 26, 2010 6:50 pm

Guest


Guest
Code:
<html>
<head>
<style type="Text/css'>

div.ipad {
background : url(http://i33.servimg.com/u/f33/14/23/24/21/ipad13.png) no-repeat;
}
</style>
<body>
 <div class="ipad"><iframe src="http://cool-processor.jalbum.net/Ipad-Gallery" height="600" width="850"></iframe></div>
  </body>
</html>

10Background problem Empty Re: Background problem Thu Aug 26, 2010 7:05 pm

ankillien

ankillien
Administrator
Administrator
You forgot to close the head tags. Try this...

Code:
<html>
<head>
<style type="text/css'>

div.ipad {
background : url(http://i33.servimg.com/u/f33/14/23/24/21/ipad13.png) no-repeat;
}
</style>
</head>
<body>
 <div class="ipad"><iframe src="http://cool-processor.jalbum.net/Ipad-Gallery" height="600" width="850"></iframe></div>
  </body>
</html>

11Background problem Empty Re: Background problem Thu Aug 26, 2010 7:21 pm

Guest


Guest
still nothing Sad

12Background problem Empty Re: Background problem Thu Aug 26, 2010 7:45 pm

ankillien

ankillien
Administrator
Administrator
This code should work. I've tested it Very Happy

The code had a small bug and some height and width needed to be fixed.

Code:
<html>
<head>
<style type="text/css">
body {
padding : 100px 0 0 110px;
background : url(http://i33.servimg.com/u/f33/14/23/24/21/ipad13.png) no-repeat;
}
</style>
</head>
<body>
 <div class="ipad"><iframe src="http://cool-processor.jalbum.net/Ipad-Gallery" width="600" height="400"></iframe></div>
  </body>
</html>

13Background problem Empty Re: Background problem Thu Aug 26, 2010 7:54 pm

Guest


Guest
Works excellent! Very Happy (Great idea isnt it Razz )
However,i want the gallery to be embed inside all the grey space i have made to fit in.There are some gaps to the left and right and a little bit up and down.Can you make it fit?Thanks Smile

14Background problem Empty Re: Background problem Thu Aug 26, 2010 8:05 pm

ankillien

ankillien
Administrator
Administrator
Code:
<html>
<head>
<style type="text/css">
body {
padding : 96px 0 0 86px;
background : url(http://i33.servimg.com/u/f33/14/23/24/21/ipad13.png) no-repeat;
}iframe {border:none;}
</style>
</head>
<body>
 <div class="ipad"><iframe src="http://cool-processor.jalbum.net/Ipad-Gallery" width="644" height="420"></iframe></div>
  </body>
</html>

15Background problem Empty Re: Background problem Thu Aug 26, 2010 8:06 pm

Guest


Guest
Thanks Smile

I want to add this ipad into a website how can i do that beceause the css for the ipad is named as "body" and i use that css for my background image Sad

16Background problem Empty Re: Background problem Thu Aug 26, 2010 9:00 pm

ankillien

ankillien
Administrator
Administrator
Replace your CSS with this...

Code:
div.ipad {
padding : 96px 0 0 86px;
background : url(http://i33.servimg.com/u/f33/14/23/24/21/ipad13.png) no-repeat; height:520px;}iframe {border:none;}

It should work then. You might need to adjust the padding a little bit after making these changes.

17Background problem Empty Re: Background problem Fri Aug 27, 2010 2:37 pm

Guest


Guest
locked please!Works fine thanks! Smile

18Background problem Empty Re: Background problem Fri Aug 27, 2010 2:38 pm

Jophy

Jophy
Registered Member
Registered Member
Solved => Locked

http://www.socialtechforum.com/

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

WebArtz - The Web Design Forum » Web Designing & Coding » HTML (Hyper Text Markup Language) » Background problem

Permissions in this forum:
You cannot reply to topics in this forum