[css-d] Image Background
Hi; I saw this done somewhere but lost track of it. What I would like to do is put a resizable background image (or color) behind pics I put on a Web site, such that, for example, it ends up bordering the image 10 px all around. How do I do this? TIA, Victor __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image Background
At 8:44 AM -0500 8/19/09, Victor Subervi wrote: Hi; I saw this done somewhere but lost track of it. What I would like to do is put a resizable background image (or color) behind pics I put on a Web site, such that, for example, it ends up bordering the image 10 px all around. How do I do this? TIA, Victor Victor: You mean like a frame around a picture? Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] image background question
On Wed, Jul 9, 2008 at 10:47 PM, Kelly Moore [EMAIL PROTECTED]
wrote:
trying to figure out how to use a small image (such as a fat arrow) as
a background. want to be able to re use the arrow and place different
numbers over it. I've tried the following, but the arrow does not
display:
h3 span.arrow{
height: 5px;
width: 24px;
margin: 10px;
background-image: url(images/arrow.png);
background-repeat: no-repeat;
}
h3span class=arrow2./span something here/h3
any ideas?
If I were you I would just stick the background on the h3 as that's
already being displayed as a block by default. Then put the number in a
span like so:
HTML:
h3span class=number3/spanheading text/h3
CSS:
h3 {
background: url(yourimage.png) no-repeat;
height: 20px; /* height of your image */
}
span.number {
float: left;
width: 20px; /* width of your image */
text-align: center;
margin-right: 10px; /* distance from your image to the rest of the h3 */
line-height: 20px; /* height of your image, to make the number center
vertically */
padding-left: 0; /* add padding if your image isn't symmetric */
padding-right: 0; /* same, don't forget to deduct padding from the width
above */
}
My 0.02 ;)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] image background question
trying to figure out how to use a small image (such as a fat arrow) as
a background. want to be able to re use the arrow and place different
numbers over it. I've tried the following, but the arrow does not
display:
h3 span.arrow{
height: 5px;
width: 24px;
margin: 10px;
background-image: url(images/arrow.png);
background-repeat: no-repeat;
}
h3span class=arrow2./span something here/h3
any ideas?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] image background question
Two ideas:
1) a link please so we can see your page, check to see if there are other
issues not apparent in the snippet you provided, etc. Possibly a path
problem to the image? Any number of things could be the case when we
essentially can't see what you see.
2) span tags are inline elements. You might try display:block; on your
span. Not sure.
On Wed, Jul 9, 2008 at 3:47 PM, Kelly Moore [EMAIL PROTECTED] wrote:
trying to figure out how to use a small image (such as a fat arrow) as
a background. want to be able to re use the arrow and place different
numbers over it. I've tried the following, but the arrow does not
display:
h3 span.arrow{
height: 5px;
width: 24px;
margin: 10px;
background-image: url(images/arrow.png);
background-repeat: no-repeat;
}
h3span class=arrow2./span something here/h3
any ideas?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] image background question
From: Kelly Moore [EMAIL PROTECTED] hmm, well here is my test page. it seems to work, but this is stand-alone. i had to add a bunch of 's for the full arrow to work. is there a better way to do this? http://yakmaster.net/test/arrowtest.html Kelly, Have you tried setting the arrow image as a background image on the h3 instead of that span and tried to work things out that way? ~holly __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] image background question
tried, but without much luck. Kelly, Have you tried setting the arrow image as a background image on the h3 instead of that span and tried to work things out that way? ~holly __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] image background question
Kelly Moore wrote:
hmm, well here is my test page. it seems to work, but this is
stand-alone. i had to add a bunch of nbsp; 's for the full arrow to
work. is there a better way to do this?
http://yakmaster.net/test/arrowtest.html
Hi Kelly,
On your test page, one of the problems I encountered was that your 2
is the same color as the background-color, so when it's not directly
over top of the image, I see nothing.
Here's a bit of sample code I use for bullet-image replacement...maybe
it'll be helpful for you:
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
htmlhead
titlestyle:focus{bullet:image-replacement}/title
style type=text/css
h1 {
background-color: #dedede;
border:1px solid #99;
color: #454545;
font-family: sans-serif;
padding: 5px;
text-align:center;
}
h3.bii {
background-color: #dedede;
border:1px solid #99;
color: #66;
font-family: sans-serif;
overflow: hidden;
}
h3.bii span.bullet {
background-image:
url(http://destiney.com/images/btn_small_arrow.png;);
background-position: 0 50%;
background-repeat: no-repeat;
display: inline;
float: left;
height:auto !important;
height:27px;
margin-right: 5px;
min-height:27px;
padding-left: 32px;
text-align:right;
width: 2em;
}
/style
!--[if IE]style type=text/css
h3.bii{zoom:1}
/style![endif]--
/headbody
h1Bullet-to-Image Replacement (single line)/h1
h3 class=biispan class=bullet1./span| Item Content/h3
h3 class=biispan class=bullet100./span| Item Content/h3
h3 class=biispan class=bullet999./span| Item Content/h3
/body/html
Hope it helps.
--Bill
--
/**
* Bill Brown
* TheHolierGrail.com MacNimble.com
* From dot concept...to dot com...since 1999.
***/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] image background question
http://yakmaster.net/test/arrowtest.html
Kelly,
Have you tried setting the arrow image as a background image on the h3 instead
of that span and tried to work things out that way?
Delete the non-breaking spaces from your HTML and change your CSS to the
following -
h3 {
color:#25427c;
font-size:0.9em;
background-image: url(images/orange_indicator.png);
background-repeat: no-repeat;
}
h3 span.orangearrow {
height: 15px;
width: 24px;
margin: 0 10px 0 0;
font-size: small;
text-align: center;
display: block;
float: left;
color:white;
}
~holly
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] image background question
From: Kelly Moore [EMAIL PROTECTED] tried, but without much luck. http://yakmaster.net/test/arrowtest.html Please bottom post and leave/include the links so people responding later don't have to go hunt them down. Here's my example - http://members.dslextreme.com/users/cssjedi/css-d/arrowtest.html ~holly __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] image background question
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Kelly Moore
Sent: Wednesday, July 09, 2008 10:48 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] image background question
trying to figure out how to use a small image (such as a fat
arrow) as a background. want to be able to re use the arrow
and place different numbers over it. I've tried the
following, but the arrow does not
display:
h3 span.arrow{
height: 5px;
width: 24px;
margin: 10px;
background-image: url(images/arrow.png);
background-repeat: no-repeat;
}
h3span class=arrow2./span something here/h3
any ideas?
Hmmm, perhaps try using padding instead of margin?
David Jones, Content Coordinator, Information and Technology Management,
Customer Relations - KL PS, (808) 948-5830
MMS hmsa.com made the following annotations.
--
This electronic message is not an offer to contract, the acceptance of an offer
to contract, or in any other way intended to contractually obligate HMSA;
neither is it intended to change the terms of any existing contract unless
specifically so stated.
The information contained in this electronic message (or attached hereto) is
intended only for the individual or entity to which it is addressed and may
contain information that is confidential and protected by law. If you are not
the intended recipient of this e-mail, you are cautioned that use of its
contents in any way is prohibited and may be unlawful. If you have received
this communication in error, please notify the sender immediately by e-mail or
telephone and return the original message by e-mail to the sender or to [EMAIL
PROTECTED] We will reimburse you for any cost you incur in notifying us of the
errant e-mail. Thank you. ยท
==
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image Background On Hover Isn't Working
On Tue, Feb 26, 2008 at 7:20 PM, Elli Vizcaino [EMAIL PROTECTED] wrote: Hello, The logo NJ.com in the upper left in the #topnav div isn't swapping out with it's highlighted counterpart on hover. Would this help? http://www.tutorio.com/tutorial/pure-css-image-rollovers Your logo wouldn't be an img but an a with background-image set in the stylesheet (with and without hover pseudo-class) I think there was something about hover-for-links works with IE 6, but not hover-for-other-elements. So you might be lucky. Stephan -- Stephan Wehner - http://stephan.sugarmotor.org - http://www.thrackle.org - http://www.buckmaster.ca - http://www.trafficlife.com - http://stephansmap.org __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Image Background On Hover Isn't Working
Hello, The logo NJ.com in the upper left in the #topnav div isn't swapping out with it's highlighted counterpart on hover. Not sure I set the CSS right but that's the effect I'm aiming for. Also, the image doesn't show up sometimes in Windows FF. Or at least it wasn't showing earlier though it seems to be now. Any suggestions on how I can get the images to swap out on hover for the logo? http://e7flux.com/new/new.html Looking for last minute shopping deals? Find them fast with Yahoo! Search. http://tools.search.yahoo.com/newsearch/category.php?category=shopping __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image Background On Hover Isn't Working
On Wed, Feb 27, 2008 at 6:20 AM, Elli Vizcaino [EMAIL PROTECTED] wrote:
Hello,
The logo NJ.com in the upper left in the #topnav div
isn't swapping out with it's highlighted counterpart
on hover. Not sure I set the CSS right but that's
the effect I'm aiming for. Also, the image doesn't
show up sometimes in Windows FF. Or at least it wasn't
showing earlier though it seems to be now. Any
suggestions on how I can get the images to swap out on
hover for the logo?
http://e7flux.com/new/new.html
Looking for last minute shopping deals?
Find them fast with Yahoo! Search.
http://tools.search.yahoo.com/newsearch/category.php?category=shopping
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Hello,
A background image is just that, a _background_ image. You cannot swap
it with the actual image in the markup (i.e. the img element), IMO.
You know, when you encounter such problem when something so trivial
just doesn't work, it's always good to validate both the HTML and CSS.
At times a forgotten closing tag or a closing brace } can you make you
scratch your head for hours trying to solve an issue to no avail. By
looking at your code, you're mistakenly advancing the element's name
before the class selector for the sitelogo class, which is incorrect
You have: li a.sitelogo {...} [Incorrect]
It should be: li sitelogo.a and li sitelogo.a:hover respectivley!
Yet, to achieve the effect you're after, declare the logo image to li
a.sitelogo as well and add a transparent background-color to the img
element so it degrades gracefully.
Hey: I guess you're editing the page while I've been testing and
debugging it, and I can tell that brought me into the greatest
confusion I've had in a while. :D
Regards,
Usamah
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image background above and below sub UL automatically
On Thu, 04 Jan 2007 09:31:13 -0500, Tony Lush wrote: We have a left menu composed of two levels of unordered lists, and the art director would like a fine gradient line above and below the subsidiary UL. I had responded: You could try adding padding-top and -bottom instead of a border, and apply the gradient to this same UL as a repeated background image. On Sun, 07 Jan 2007 14:02:43 -0500, Tony Lush wrote: Thank you, David. That did the trick. I posted a view of what you suggested at: http://advancewm.com/test_menu.htm That's pretty effective, Tony, even at large text zoom. So glad my suggestion worked. Thanks for the feedback. Cordially, David -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image background above and below sub UL automatically
Thank you, David. That did the trick. I posted a view of what you suggested
at: http://advancewm.com/test_menu.htm
The essential parts were:
#leftnav3 ul ul {
margin: 1px 0;
background: url(/s5/left-nav-bar.gif) repeat-y top left;
padding: 1px 0;
list-style: none;
}
#leftnav3 ul ul li {
margin: 0;
padding: 0;
background-color: #fff;
display: block;
}
The display:block allowed the white background of the LI to cover the UL's
background image.
Best regards -- Tony
On Thu, 04 Jan 2007 09:31:13 -0500, Tony Lush wrote:
We have a left menu composed of two levels of unordered lists, and the art
director
would like a fine gradient line above and below the subsidiary UL.
If it were just a fine grey line I could use:
#leftnav ul ul {
border-top: 1px solid #eee;
border-bottom: 1px sold #eee;
}
[...]
Hi Tony,
You could try adding padding-top and -bottom instead of a border,
and apply the gradient to this same UL as a repeated background image.
Cordially,
David
--
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Image background above and below sub UL automatically
Hello,
We have a left menu composed of two levels of unordered lists, and the art
director would like a fine gradient line above and below the subsidiary UL.
If it were just a fine grey line I could use:
#leftnav ul ul {
border-top: 1px solid #eee;
border-bottom: 1px sold #eee;
}
That requires no manual effort by the site maintainer.
I can create the effect manually by having a class applied to the first and
last items in the sub UL like:
.line_over {
background:url(/images/left-nav-bar.gif) no-repeat top left;
}
and
.line_under {
background:url(/images/left-nav-bar.gif) no-repeat bottom left;
}
That requires the page maintainer to manually insert the classes into the
respective ul ul li tags, and I'd like to make life simpler for them.
An example with both menus is at: http://advancewm.com/test_menu.htm
Does anyone have a better solution?
Thank you -- Tony Lush
http://AdvanceWebMarketing.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image background above and below sub UL automatically
On Thu, 04 Jan 2007 09:31:13 -0500, Tony Lush wrote:
We have a left menu composed of two levels of unordered lists, and the art
director
would like a fine gradient line above and below the subsidiary UL.
If it were just a fine grey line I could use:
#leftnav ul ul {
border-top: 1px solid #eee;
border-bottom: 1px sold #eee;
}
[...]
Hi Tony,
You could try adding padding-top and -bottom instead of a border,
and apply the gradient to this same UL as a repeated background image.
Cordially,
David
--
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Image background issue
Hi, I don't know if what I'm trying is possible but I'll attempt to explain it here and see what people say. Basically I have graphic of a rounded rectangle (a rectangle with curved edges) and I'm trying to make it dynamically resizable in pure CSS. So I have cut the left end off in photoshop and then have a div with a top bottom border that continues the rectangle, but I can't manage to get the right end of the rectangle to 'connect' to the previous parts. It looks something like this: ( = ) So I made the right edge display inline and it disappears totally, display block and it appears on the next line. Is there anyway I can do this? Cheers. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] image background color
hi given a href=http://anyimage.pnganyimage.png/a what is the css to set the background color of the *image* itself (not the link) ? - Yahoo! FareChase - Search multiple travel sites in one click. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
