Add a background image

Instead of just a plain background,How do I add an image background?

Quote:

---

Originally Posted by alan081954

Instead of just a plain background,How do I add an image background?

---

if you can add image into your background,you can change the style.css

Code:

---

background-color: #cccccc;

---

replace this css into this

Code:

---

background-image:
url('yourimage.gif')

---

Code:

---

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #cccccc;
color: #222222;
margin: 0px;
padding: 0px;
}

---

I tried the above and it does not work.

Make sure you have all your code correct and that you're pointing to the actual location of the image. This following is assuming that the image is located in the vshare/templates/images folder.

Code:

---

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #cccccc;
background-image: url ('../images/YOURIMAGE.jpg');
color: #222222;
margin: 0px;
padding: 0px;
}

---

If that background-image directive doesn't work, try this one. I find that it works better with FF. Place inside the BODY class in your styles.css as you would above. It's the same code I use for skins that have back ground images such as this one http://webgeek-design.com/index.php?act ... oductId=71

background-image: url("../images/YOURIMAGE.jpg");background-repeat:repeat;background-attachment: fixed;

has anyone got this to work? I'm still having issues.

Please post the contents of your css file so we can have a look at it and also, verify that the image actually exists in that location on your server and that you're not experiencing a browser cache issue as well. The code I posted works, I use it all the time.

.
If you add something like this to the style.css file ... assuming that the name of your background image is stylebg.gif and that it is indeed located in your templates/images folder ....

Code:

---

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-image: url("../images/stylebg.gif");
color: #222222;
margin: 0px;
padding: 0px;
}

---

... then you will see that image around the outside perimeter of your video portal, i.e. to the left and the right of your page, and also above/below if you have a margin set for it. This background will NOT appear anywhere on your actual "working" screen or if you use your browser in less than full-screen mode it may also not show up if your browser margins are the same as the page being viewed. Like I said, this will show up OUTSIDE of your working page. On the other hand, if you add something like ....

Code:

---

<table cellspacing="0" cellpadding="0" BORDER="0" BACKGROUND="http://www.locationofyourvidportal.com/templates/images/bgimage.gif" width="100%">

---

... into the header.tpl file (located in templates) then you can coordinate that background at the top, with the background that you've already added to the outside of your pages (see above). Don't ask ... just use your imagination and some image software to do it. In this case we've designed a background image (bgimage.gif) that takes up the entire table of the header. But you can also make just a shading image which just keeps on repeating itself. That's what we had at first. The shading image is a lot easier since the whole background image for the table requires a little finesse, in order to make it work together with the exterior background.

A working sample can be seen on our german language portal which looks tremendous (now). :D
http://www.meineclipshow.einfachclicken.de/
.
Cheers

Adding the images code to the custom_doc class in the css makes the image appear in the main section of the site as well.

Quote:

---

Originally Posted by grynmoors

Adding the images code to the custom_doc class in the css makes the image appear in the main section of the site as well.

---

Hmmmm, now THAT sounds pretty interesting ...
Can you point us to a site where this can be seen in action? Thanks.
.

Certainly.

http://webgeek-design.com/index.php?act ... oductId=71

I am also in the process of doing a custom design for another site at

http://vshare-mods.com where I'm using this. Warning: site is a mess as I just got started, but you will get a good example of the background image which is used in the css.

.
Well, to each their own, I guess ... :?:
I looked at both of them and find them to be quite distracting. No matter how cool that transparency may be, it still distracts from having the user focus on the issue at hand, or should I say, on the "extreme coolness" of the available videoclips that are right there, to be enjoyed. Hey, but then I'm sure that there are some who would consider such skins the hottest thing since sliced cheese. As far as I'm concerned, I want our visitors to direct their attention to the center of the screen with its content, and not the stuff that's going on outside of the content ... too much bling can be a turn-off too.
.
Thanks for those graphical samples though. :)

Which is why, when I posted about the leopard lounge one, that it's the most over-done and tackiest thing on the planet (search the "show case your site" section of the forums about that skin). And it can't be THAT bad if I've sold 2 of them.

Check the one at rappelzvideos.com with background images. :P I've gotten tons of compliments on that one.

The one for df2videos.com is mainly a gamer site for kids and they like that kind of stuff, not for old fart like us. I'm making this site for THEM, not for me... and they like that stuff.