activematx
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:
I would like to use CSS code so that I have the image behind my text. Sorta like this:
BTW, I am using a Wordpress Template. I am not sure if this matters or not.
My website is here: http://www.hawaiipacificparks.org
If you look there on the front of the page I have this text:
I would like to use CSS code so that I have the image behind my text. Sorta like this:
BTW, I am using a Wordpress Template. I am not sure if this matters or not.
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:
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,
to include background-image attribute as given below:
.three_fourth {
background-image: url("/wp-content/uploads/2011/10/islands.gif");
width: 74%;
}
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;
You can use background-position to place image at appropriate location:background-position:right top;
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%;
}
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:
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.
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]
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.