CSS Help!!

**Scott B** · 03-22-2008 11:04 AM

Hello everyone.
I am trying to create a web page and I need some help.
On this page I want a repeating x image and a repeating y image for a background. I have this so far:

HTML Code:

<html>
<head>
  <title></title>
  <style type="text/css">
body { background-color: black; }
body { background-image: url(http://sbonline.exofire.net/back.jpg);
background-repeat: repeat-x;
body { background-image: url(http://sbonline.exofire.net/cback3.png);
background-repeat: repeat-y;
}
  </style>
</head>
<body>
</body>
</html>

But with this, only the x image shows. Please help!!!

**sunils** · 03-22-2008 11:31 AM

I think this cannot be done. you cannot have two images to be a background. its not possible. Join the two required image to a single image in the desired position and then use it.

**Scott B** · 03-22-2008 11:37 AM

OK, thanks
is there a way to auto-center an image for the background for people with different resolutions?

**Garlund** · 03-22-2008 11:52 AM

Yeah, won't work.

I tried to see if I could tweek it doing this:

<style type="text/css">
html {background: url('directory/image.type') repeat-y;}
body {background: url('directory/image.type') repeat-x;}
</style>

But it just repeated X only.

I then I tried your way but added ' after and before () and did
background-repeat: repeat-y/repeat-x;

But that didn't work either.

Your best solution is to combine your images and just make it the background. Then, do not define either X or Y. Or try using either javascript or xml to create your desired background ;)

Hope this helps.

**sunils** · 03-22-2008 11:53 AM

I dont know whether its the right way. but just make a try.

<html>
<head>
<title></title>
<style type="text/css">
body{background: black; background-image:url(http://sbonline.exofire.net/back.jpg); background-position:center;}
</style>
</head>
<body>
</body>
</html>

This style attribute will work i think
background-position:center;

**Scott B** · 03-22-2008 12:02 PM

OK, thanks, hope this will help

**Garlund** · 03-22-2008 12:21 PM

That won't work, due to center not being a correct value for that property.

background-position values are:

center left
center right
center center

Now you can do this
<style type="text/css">
body {
background-image: url('directory/image.type');
background-repeat: no-repeat;
background-attachment: fixed;
z-index: /* May have to adjust several times to focus in
center */
}
</style>

try that and see if that works. If not, replace 'z-index' with top:##px; and left/right:##px;
or background-position: center center;
That should work perfectly :D
Edit:

Originally Posted by Garlund

That won't work, due to center not being a correct value for that property.

background-position values are:

center left
center right
center center

Now you can do this
<style type="text/css">
body {
background-image: url('directory/image.type');
background-repeat: no-repeat;
background-attachment: fixed;
z-index: /* May have to adjust several times to focus in
center */
}
</style>

try that and see if that works. If not, replace 'z-index' with top:##px; and left/right:##px;
or background-position: center center;
That should work perfectly :D

you can also do this which is really cool and lightens your background image if its too dark :D

<style type="text/css">
body {
background-image: url('directory/image.type');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
/* for IE */
filter:alpha(opacity=70);
/* CSS3 standard */
opacity:0.7;
}
</style>
/* this will add transparency to your image making it easier to read words on your website if the image is too dark. */

Try it, it works well :naughty:

**Scott B** · 03-22-2008 12:29 PM

OK, thanks!
Now I need to know how to place a link over an image, for example, on the Joomla website, under "download latest" on the left, the whole thing is an image and there are links over the version buttons.

**Garlund** · 03-22-2008 01:05 PM

If you want what they have do this. If you want the menu to be its own <div> or <td> within a table, us ID classification to identify the top part and each link. keep all dementions the same so that it flows together well and looks nice and neat (professional even).

#sidemenu { /* this will be where you add something like 'Menu' or Links */
background-image: url('directory/image.type');
background-repeat: no-repeat;
width:100px;
height:40px;
border:1px inset #color;
}
/* do the same for each link but make a different image */
#menulink:link {
text-decoration: none;
color: /* what ever color you want font to be */;
font-family: /* determine font here */;
font-weight: bold;
font-size:##px; /*keep the font a reasonable size */
background-image: url('directory/image.type');
background-repeat: no-repeat;
width:100px;
height:40px;
border-top:1px inset #color;
border-bottom:1px inset #color;
}
#menulink:hover {
text-decoration: underlined;
color: /* opposite of :link */;
font-family: /* keep same as :link */;
font-weight: bold;
font-size:##px; /*keep same as :link */
/* remove the background-image for onhover effect */
/* remove repeat */
width:100px;
height:40px;
border-top:1px inset #color; /* keep same as :link */
border-bottom:1px inset #color;
}
#menulink:visited { /* keep same as :link */
text-decoration: none;
color: /* what ever color you want font to be */;
font-family: /* determine font here */;
font-weight: bold;
font-size:##px; /*keep the font a reasonable size */
background-image: url('directory/image.type');
background-repeat: no-repeat;
width:100px;
height:40px;
border-top:1px inset #color;
border-bottom:1px inset #color;
}

And what this will do is create a menu that will have graphics with onhover effect, but will never change unless mouse is focused over the links.
Also, you will want to put this within a <table> or <ul>. If you use the <ul> make sure you add 'list-style-type: none;' make a class for li's to look be inline. ex ( li.menulink {display: inline;} ). This will make it sit vertically.

And the last trick, you want to make all text-align'ed in sale position (ex., text-align: left/center/right; ). You'll want to include that in the selectors mentioned above as to keep it flowing evenly and not look... Out of wack, as I would put it.

Tell me if that helps

**Scott B** · 03-22-2008 01:15 PM

OK, thanks, I really appreciate your help, I'm trying to learn CSS

Thread: CSS Help!!

LinkBack

Thread Tools

Display

CSS Help!!

Re: CSS Help!!

Re: CSS Help!!

Re: CSS Help!!

Re: CSS Help!!

Re: CSS Help!!

Re: CSS Help!!

Re: CSS Help!!

Re: CSS Help!!

Re: CSS Help!!

Posting Permissions