CSS Help!!

Scott B

Scott B

New Member
Messages
844
Reaction score
0
Points
0
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: 
<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!!!
 
Last edited:
S

sunils

New Member
Messages
2,266
Reaction score
0
Points
0
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

Scott B

New Member
Messages
844
Reaction score
0
Points
0
OK, thanks
is there a way to auto-center an image for the background for people with different resolutions?
 
G

Garlund

New Member
Messages
29
Reaction score
0
Points
0
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.
 
S

sunils

New Member
Messages
2,266
Reaction score
0
Points
0
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;
 
G

Garlund

New Member
Messages
29
Reaction score
0
Points
0
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:
Garlund said:
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
Click to expand...


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:
 
Last edited:
Scott B

Scott B

New Member
Messages
844
Reaction score
0
Points
0
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.
 
G

Garlund

New Member
Messages
29
Reaction score
0
Points
0
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
 
Last edited:
Scott B

Scott B

New Member
Messages
844
Reaction score
0
Points
0
OK, thanks, I really appreciate your help, I'm trying to learn CSS
 
Scott B

Scott B

New Member
Messages
844
Reaction score
0
Points
0
Yeah, I am trying to learn CSS because it looks very powerful
 
Jake

Jake

Developer
Contributors
Messages
4,057
Reaction score
5
Points
0
If you 'have' Dreamweaver 8, or CS/CS3 you can make stylesheets and it has a list of all the values and properties and makes it really easy if you want to try it. Plus then you'll learn fast, thats how I learned it.
 
Scott B

Scott B

New Member
Messages
844
Reaction score
0
Points
0
I don't have dreamweaver
Now I need to know how to make the background scroll down with the rest of the page. The center background code that Garlund provided earlier works but it doesnt scroll
 
G

Garlund

New Member
Messages
29
Reaction score
0
Points
0
Err, my bad lol.


Whats the site? I'll check it out and see if I can correct it.


Also, I too do not have dreamweaver. I like using notepad. Its easier for me, its free and it just feels good to know I created the page without any help from another program because I know the script and did it myself :D

Not to knock on any who uses a program to create website, they are extremely useful as well ;)
 
You must log in or register to reply here.
Top