Link to home
Start Free TrialLog in
Avatar of activematx
activematxFlag for United States of America

asked on

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:

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

 User generated image
BTW,  I am using a Wordpress Template.  I am not sure if this matters or not.
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

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.
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,
.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

Avatar of activematx

ASKER

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.
ASKER CERTIFIED SOLUTION
Avatar of pritamdutt
pritamdutt
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial