I have an image that puts a shadow on each side of my contents, but unfortunatly when I resize the window the shadows disappear. I figured that it would work if I put in two images, one for the left side and one for the right. the image on the left is controlled by this entry:
#content {
margin-right: 20em;
margin-left: 40px;
background-color: #fff;
padding: 1em;
margin-top: 160px;
background-image: url(/wp-images/shadowlt.gif);
background-repeat: repeat-y;
background-position: left;
border-top-style: outset;
border-top-color: #BCABB1;
border-bottom-color: #BCABB1;
border-bottom-style: inset;
can I add another set of comands to #content like this
background-image: url(/wp-images/shadowrt.gif);
background-repeat: repeat-y;
background-position: right;
CSS multiple background (5 posts)
-
-
Does anyone have an idea?
-
Mark (podz)
Posted 8 years ago #
When you mean resize, do you mean by altering the screen resolution or by doing something like opening the favourites bar ?
If it's the former, could you design a style sheet that loads dependent on the resolution of the visitor ? (and use a script to do the work)
Otherwise I'd suggest trawling http://www.alistapart.com -
Anonymous
Posted 8 years ago #
I don't think you can do it the way you've suggested.
There have been a couple of good articles on this at a list apart that are definitely worth viewing. Another option would be to have a look at some of the new Blogger templates and learn from them. -
zadu
Posted 8 years ago #
My first idea would be to wrap the content div inside another div and apply a right-hand shadow to that. Or make the content div fixed-width and use a single image for both shadows.
Otherwise, do check alistapart, they have lots of good stuff.
FYI in Firefox and Opera on WinXP, I see a shadow on the left, and it does not disppear when I resize the browser window. Is this what you meant?
Topic Closed
This topic has been closed to new replies.
