Help with CSS Background Image [Archive]

View Full Version : Help with CSS Background Image

quinnrd

03-11-2003, 03:47 PM

I have an image that I want to use as a background. It is 750px x 800px. I dont
want it to repeat thus I am using a style sheet. With the following code, I can only get "Most" of the image to appear. The X is showing up fully but in the Y direction, I only can get 50% of it to show up..
If I assign this class to a table that is 750x800 I see the entire image but I dont want to do this.... Need Help....
Thanks in advance....


</style>

<body vLink=#a28d68 leftMargin="0" topMargin="0" marginheight="0" marginwidth="0"
class="logo">

</body>
</html>

Roy Sinclair

03-11-2003, 04:24 PM

You don't need to make a class out of it and assign that class to the body, this should work just as well:

body {
background-image: url(template3.jpg);
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
}

Outside of that, your web page needs to be large enough (wide enough and tall enough) to cover the whole of the background image or it could be truncated.

whitty

03-11-2003, 04:25 PM

I think you need to add some <br> tags to force the length of the page. In the table you specified the height so it would show it all but if you have a blank page and are just using that style it will only be as big as your resolution allows.

I'd also use the below code as it's easier

body {
background-attachment : fixed;
background-image : url(template3.jpg);
background-position : left top;
background-repeat : no-repeat;
}

Not really ns4 compatible though.

<edit> Looks like Roy beat me to it. :) </edit>

quinnrd

03-11-2003, 05:00 PM

Thanks for the replies. I did what you told me to and now I just get the body defination echoed out. Did I miss something:

code:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>

<style>

.stHeadliner {font-family: lucida console, courier new, monospace;

font-size: 10pt;

font-weight: bolder;

font-style: italic;

background-color: 716D66;

color: YELLOW
}
</style>

</head>

body {
background-image: url(template3.jpg);
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
}

</body>
</html>

Roy Sinclair

03-11-2003, 05:28 PM

What we gave you is supposed to replace the .logo {...} code, not the body tag. The key here is that you can specify a CSS style by the tag name instead of using a class. That way it applies to all occurances of the tag, a class would then be used to override and/or supplement that declaration for a specific occurance of a tag. In this specific case there's only one body tag allowed anyway so there's no need for a class tag.

JWGlenn

03-13-2003, 06:36 PM

I am having a similar problem with a background image. I have created an image with a size of 790x470. Originally I had extra white space, which caused a scroll from left-to-right. I trimmed the image to match the 790x470 size, with NO WHITE SPACE.

I added the 'no-repeat' attribute in the CSS, but it still scrolls left-to-right. Is there something I missed?

Here is the link: http://cwcafe.com/woj/indexv2.html

and here is the code:

<STYLE TYPE="text/css">

</STYLE>

Any help would be greatly appreciated! Thanks! :thumbsup:

quinnrd

03-13-2003, 09:51 PM

I dont claim to be an expert here but I believe if you create a table to limit the size of the image it will correct the problem. I had ta similair problem as you can see from above. I did get it work with the advice from above. But went back to the table method.

<style type="text/css">

</style>

<table width="790" cellpadding="0" cellspacing="0" border="0" height="470" class="logo">

...content code here.....

</table>

good luck..........