• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 267
  • Last Modified:

placing image to right of text

I have a div which has a heading for each section on a page.

how do I create a class which adds an image to the right handside (at the end of the text) of each heading.

here is the code for the currnet div

<h2>How The Building Centre can assist you</h2> (need image to go here)

div#content h2 {
      background: #E8EFF3 center;
      margin: 8px 0 0;
      color: #FF7E00;
      font-size: 12px;
      text-decoration: none;
      text-align: left;
      vertical-align: middle;
      padding: 5px;
      font-family: Arial, Helvetica, sans-serif;
}
0
Cheryl Lander
Asked:
Cheryl Lander
1 Solution
 
sankarbhaCommented:
Try this.  You can adjust the position of the image to right by changing the percentage values.

div#content
{
      background: url("/someimg.gif") #E8EFF3 90% 30% no-repeat fixed;
}
0
 
Alan HendersonRetired marine engineerCommented:
Or create a class like this:

.right{
      border:0px;
      padding:20px;
      float:right;
}

<h2>How The Building Centre can assist you</h2> <img class="right" src="images/image.jpg" alt="name"/>
0
 
jawahar_prasadCommented:
Hi...
TRY THIS... Just copy, paste and execute...

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
.heading {
      font-family: Thoma, Arial, Verdana;
      font-size: 11px;
      font-weight: bold;
      color: #333333;
      background-attachment: fixed;
      background-image: url(image.gif);
      background-repeat: no-repeat;
      background-position: right center;
}
-->
</style>
</head>

<body>
<h2 class="heading">This is the heading</h2>
</body>
</html>
0
 
Cheryl LanderAuthor Commented:
Im basing the following on this code.

div#content
{
      background: url("/someimg.gif") #E8EFF3 90% 30% no-repeat fixed;
}

Works fine but I can only see the image through <h2> when I scroll the page. Its almost like the background image is fixed and and that h2 is a window.
0
 
Cheryl LanderAuthor Commented:
All ok. it was affected by another div. thanks.
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now