Displaying Divider Image

HTML & CSS
1

Hello everyone,

I want to place a small divider graphic in between the welcoming statement and the drop down menus. The top text is a <p> element with an id of “welcomestatement”. These are the styles:


#welcomestatement{
	display:block;
	background-color:#FF9;
	text-align:left;
	padding-left:20px;
	padding-right:20px;
	padding-top:3px;
	padding-bottom:3px;
	border-bottom:2px inset #F8CB87;
	margin:auto;
	width:400px;
	position:relative;
	top:10px;
	text-shadow:1px 1px 1px #000;
	/*for IE*/
	filter:alpha(opacity=50);
	/*standard CSS3*/
	opacity:0.5;
	background:url(homepagedivider.gif) no-repeat scroll 50% 70px;
}

I have just updated my files at Atlanta Review Group- Product Articles and you can see the result I’m getting. I just want to put this divider graphic a little bit below that text. :eye:

2

You could do something like

#welcomestatement {
  background: url("homepagedivider.gif") no-repeat scroll 50% [COLOR="Red"]bottom[/COLOR] transparent;
  border-bottom: 2px inset #F8CB87;
  display: block;
  margin: auto;
  opacity: 0.5;
  padding: 3px 20px [COLOR="Red"]20px[/COLOR];
  position: relative;
  text-align: left;
  text-shadow: 1px 1px 1px #000000;
  top: 10px;
  width: 400px;
}
3

Well, that did put it on the bottom, but it’s opacity is 50% and it only stretches the width of “#welcomestatement”. I’m going to need to do this another way, as this divider is 600px, meant to fit the width of my main column.

4

Why don’t you add it as a background image to #wrapper instead?


#wrapper {
    background: url("homepagedivider.gif") no-repeat 50% 20px;
}