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]

1 Background problem on Thu Aug 26, 2010 1:38 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

2 Re: Background problem on Thu Aug 26, 2010 7:18 am

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();
}

3 Re: Background problem on Thu Aug 26, 2010 2:37 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

4 Re: Background problem on Thu Aug 26, 2010 4:32 pm

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>

5 Re: Background problem on Thu Aug 26, 2010 4:33 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

6 Re: Background problem on Thu Aug 26, 2010 4:40 pm

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?

7 Re: Background problem on Thu Aug 26, 2010 4:43 pm

Guest


Guest
it displays only the frame!

8 Re: Background problem on Thu Aug 26, 2010 4:53 pm

ankillien


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

9 Re: Background problem on Thu Aug 26, 2010 5:20 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>

10 Re: Background problem on Thu Aug 26, 2010 5:35 pm

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>

11 Re: Background problem on Thu Aug 26, 2010 5:51 pm

Guest


Guest
still nothing Sad

12 Re: Background problem on Thu Aug 26, 2010 6:15 pm

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>

13 Re: Background problem on Thu Aug 26, 2010 6:24 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

14 Re: Background problem on Thu Aug 26, 2010 6:35 pm

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>

15 Re: Background problem on Thu Aug 26, 2010 6:36 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

16 Re: Background problem on Thu Aug 26, 2010 7:30 pm

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.

17 Re: Background problem on Fri Aug 27, 2010 1:07 pm

Guest


Guest
locked please!Works fine thanks! Smile

18 Re: Background problem on Fri Aug 27, 2010 1:08 pm

Joph25


WebArtz Moderator
WebArtz Moderator
Solved => Locked

http://www.socialtechforum.com/

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