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

Use CSS to put an image behind text

Hi Experts,

My website is here:  http://www.hawaiipacificparks.org

If you look there on the front of the page I have this text:

 Example
I would like to use CSS code so that I have the image behind my text.  Sorta like this:

 How I Sorta Want it to Look
BTW,  I am using a Wordpress Template.  I am not sure if this matters or not.
0
activematx
Asked:
activematx
1 Solution
 
Dave BaldwinFixer of ProblemsCommented:
Normally I would just put it as background image in <div class="three_fourth">.  But I don't know what else you use that class for.
0
 
pritamduttCommented:
Please change Line 376 of http://www.hawaiipacificparks.org/wp-content/themes/striking/css/screen.css?ver=3.2.1

to include  background-image attribute as given below:
.three_fourth {
    background-image: url("/wp-content/uploads/2011/10/islands.gif");
    width: 74%;
}

Open in new window

Please note by default the image will be repeated in the background, so if you don't want this behavior you can add following as well:

background-repeat:no-repeat;

Open in new window

You can use background-position to place image at appropriate location:

background-position:right top;

Open in new window


The possible values for background-position are

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom


Hope this helps!

Regards,
0
 
CKY092Commented:
.three_fourth {
    background-image: url("http://www.hawaiipacificparks.org/wp-content/uploads/2011/10/islands.gif");
    background-position: 80px 5px;
    background-repeat: no-repeat;
    width: 74%;
}

Open in new window

0
 
activematxAuthor Commented:
I was able to get the background image to appear with your method.  However, I only want it to appear on this one page.  Doing so, by modding out the .three_fourth { section causes all of my pages to have the islands there.

When I sign into Wordpress I have a html editor for that page.  Here is the code for that specifc page:

[three_fourth]
<p style="text-align: left;"><span class="Apple-style-span" style="font-size: 18px; font-weight: bold;"><img class="alignnone size-full wp-image-414" title="Aloha" src="http://www.hawaiipacificparks.org/wp-content/uploads/2011/10/Aloha1.gif" alt="" width="169" height="54" />
Welcome to Hawai‘i Pacific Parks</span></p>
<p style="text-align: left;">Experience the beauty and wonder of the national parks of Hawai¿i. From culturally rich historic sites to active volcanoes, diverse climates, and endangered species found nowhere else on earth – the national parks in Hawai¿i honor you, the visitor, and invite you to connect with the unique character of these remote Pacific islands.</p>
<p style="text-align: left;">Hawai¿i Pacific Parks is a nonprofit cooperating association working in partnership with the National Park Service. Proceeds from our bookstores support interpretive and educational programs, research projects, publications, and cultural activities.</p>
<a href="http://www.hawaiipacificparks.org/wp-content/uploads/2011/10/islands.gif"><img class="size-full wp-image-485 alignnone" title="islands" src="http://www.hawaiipacificparks.org/wp-content/uploads/2011/10/islands.gif" alt="" width="429" height="231" /></a>[/three_fourth]
[one_fourth_last]
<h3>Bestsellers</h3>
<img class="size-full wp-image-454 alignnone" title="1a" src="http://www.hawaiipacificparks.org/wp-content/uploads/2011/10/1a.jpg" alt="" width="49" height="49" /> <img class="alignnone size-full wp-image-455" title="2a" src="http://www.hawaiipacificparks.org/wp-content/uploads/2011/10/2a.jpg" alt="" width="49" height="49" /> <img class="alignnone size-full wp-image-456" title="3a" src="http://www.hawaiipacificparks.org/wp-content/uploads/2011/10/3a.jpg" alt="" width="49" height="49" /><a href="http://www.hawaiipacificparks.org/wp-content/uploads/2011/10/3a.jpg">
</a><img class="alignnone size-full wp-image-457" title="4a" src="http://www.hawaiipacificparks.org/wp-content/uploads/2011/10/4a.jpg" alt="" width="49" height="49" /> <img class="alignnone size-full wp-image-458" title="5a" src="http://www.hawaiipacificparks.org/wp-content/uploads/2011/10/5a.jpg" alt="" width="49" height="49" /> <img class="alignnone size-full wp-image-459" title="6a" src="http://www.hawaiipacificparks.org/wp-content/uploads/2011/10/6a.jpg" alt="" width="49" height="49" /><a href="http://www.hawaiipacificparks.org/wp-content/uploads/2011/10/6a.jpg">
</a><img class="alignnone size-full wp-image-460" title="7a" src="http://www.hawaiipacificparks.org/wp-content/uploads/2011/10/7a.jpg" alt="" width="49" height="49" /> <img class="alignnone size-full wp-image-462" title="8a" src="http://www.hawaiipacificparks.org/wp-content/uploads/2011/10/8a.jpg" alt="" width="49" height="49" /> <img class="alignnone size-full wp-image-463" title="9a" src="http://www.hawaiipacificparks.org/wp-content/uploads/2011/10/9a.jpg" alt="" width="49" height="49" />
<h3>Happenings</h3>
<a href="http://www.hawaiipacificparks.org/wp-content/uploads/2011/10/4a1.jpg"><img class="alignnone size-full wp-image-465" title="4a" src="http://www.hawaiipacificparks.org/wp-content/uploads/2011/10/4a1.jpg" alt="" width="74" height="74" /></a>  <a href="http://www.hawaiipacificparks.org/wp-content/uploads/2011/10/4a1.jpg"><img class="alignnone size-full wp-image-465" title="4a" src="http://www.hawaiipacificparks.org/wp-content/uploads/2011/10/4a1.jpg" alt="" width="74" height="74" />
</a><a href="http://www.hawaiipacificparks.org/wp-content/uploads/2011/10/4a1.jpg"><img class="alignnone size-full wp-image-465" title="4a" src="http://www.hawaiipacificparks.org/wp-content/uploads/2011/10/4a1.jpg" alt="" width="74" height="74" /></a>  <a href="http://www.hawaiipacificparks.org/wp-content/uploads/2011/10/4a1.jpg"><img class="alignnone size-full wp-image-465" title="4a" src="http://www.hawaiipacificparks.org/wp-content/uploads/2011/10/4a1.jpg" alt="" width="74" height="74" /></a><a href="http://www.hawaiipacificparks.org/wp-content/uploads/2011/10/4a1.jpg">
</a>

[/one_fourth_last]

Open in new window



Would it be possible for me to put the CSS code in here perhaps?

My Wordpress theme also has a section for "custom CSS".  I am not sure if this helps.
0
 
pritamduttCommented:
Okie if that is the case you can use the following solution:

Add following to your class file:

body.page-id-271 .three_fourth {
     background-image: url("http://www.hawaiipacificparks.org/wp-content/uploads/2011/10/islands.png");
     background-repeat: no-repeat;
    background-position: right top;
}

Open in new window


and remove these lines from .three_fourth class declaration
     background-image: url("http://www.hawaiipacificparks.org/wp-content/uploads/2011/10/islands.png");
     background-repeat: no-repeat;
    background-position: right top;

Open in new window


Hope this helps!

Regards,
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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