Advertisement
Trying the changeover from tables.
Wondering if I can have a repeating image or color bar going across the top of the browser window, and another color band going down the left side.
In tables I used to have the left side be the background image for the page, and across the top be in a table with a width of 100%
Hope this is possible in CSS
Help please.
Wondering if I can have a repeating image or color bar going across the top of the browser window, and another color band going down the left side.
In tables I used to have the left side be the background image for the page, and across the top be in a table with a width of 100%
Hope this is possible in CSS
Help please.
posted by:
|
Maryland
|
Advertisement
Advertisement
-
Well if you want to use 2 actual images ont he same element youre out of luck. Only Safari 2.0 renders it properly. Im not sure if this is a bug in Safari or a better adherance to standards.
If you want can use a solid color and an image the prospects get a bit better. However you can then only tile the bg in one direction. For example if you want 200px of the #f00; at the left of the element then you can only tile the background on the x axis and the same for y. it would look something like this:
div#element {
background-color: #f00;
background-image: url();
background-position: 200px 0px; /* i always get these confused as to which comes first, i think its x just liek standard coords but i could be wrong... this assumes x does indeed come first */
background-repeat: repeat-x;
}
Overall though i woudl just recommend using nested elements. It will save you headaches. -
-
body{background:url(thesideImageTile.jpg) left repeat-y;}
in the main page make a new div...
<body>
<div id="TopImage" style="background:url(theTopImage.jpg) left repeat-x;">this is the thing at the top of the page with your picture</div> -
-
This works with text in the area.
I see that if I delete the text, the image isnt there.
How do I fix that?
And also, how do I make the div wider, to show the whole width of the top repeating image? -
-
I have to nest divs like mad around the design just to center the content in the viewport on IE. So it's no big deal to style these nestings with different background images.
The painfull part is that most hex colors are still not supported in Winblows: the hex colors won't match the same color in an image file so there will be a seam between the two in the windows version. The trick is to nest enough that you can assign a little repeating image file instead of a hex color--and then some edge or corner ornament.
-
-
you should avoid seeting styles in the tag itself (try and keep elements ot as few attributes as possible) and use a linked or inlie style sheet instead like so (this is for inline):
<!-- styles go in the HEAD of the document -->
<style type="text/css">
/* this uses an id selector, alternatively you could use an class or tag selector. a class selector would look like
.TopImage { [rules] } while a tag selector would be div { rules } a tag selector will style every div according to the rules though so thats not an option here. Also what jason provided was shortand for the background properties, i prefer to break mine out long hand, although thats not necessary - i find it makes for less confusion though */
#TopImage {
background-image:url(theTopImage.jpg);
background-position: left;
background-repeat: repeat-x;
/* by setting the height and width properties explicitly a spacer image isnt needed */
height: 100px;
width: 750px;
}
</style>
<!-- thi markup would be in the BODY of the document as it exists now -->
<!-- not the removal of the style attribute in favor of only an id. id you were using a clss selector you would have have class="TopImage" in order t o apply the style to the element -->
<div id="TopImage">
</div>
-
-
