Jump to content

Archived

This topic is now archived and is closed to further replies.

JawDesigns

Offset Highlight font so that it's ontop of the Highlight image

Recommended Posts

JawDesigns

Hi to all,

 

I am pretty new to CSS/HTML but I've been playing with a few sites. However, I'm wondering what's the best way to offset the highlight text so that it is on top of the highlight image? I am going to have a look into a good property for achieving this without moving everything either below or above the section (like the margin property does). Any help, tutorials or ideas on how to achieve this would be great.

 

Please see screenshot attached if the above is not clear?

 

Cheers,

 

James


James Wilson

Designer & Photographer

 

Share this post


Link to post
Share on other sites
Rob

James, there's a setting for that.

 

See image below:

[attachment=1584:9-26-2013 1-19-55 AM.jpg]


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
JawDesigns

Hi Rob, thanks for the help. However, the settings will only position the text either above or below the image. Please take a look at the new screenshot I have added this am, I was hoping to position the text over the top of the image (not above or below). I hope that makes more sense and apologies if the above wasn't clear?

 

Cheers, James


James Wilson

Designer & Photographer

 

Share this post


Link to post
Share on other sites
Danny

The easiest way to do this would be to do the following:

 

1. Add the Column Section to your Template

2. Add the Highlight section to your Column Section.

3. Go to Custom Code > Custom CSS/LESS and add a custom class that uses the background-image property.

 

For example:

 

.my-highlight-img {

background-img: url(path to image);

background-postion: ;

background-repear: ;

etc....

}

 

4. Now click edit on the Column section and in the styling classes field, add my-highlight-img

5. Add your Highlights sections title

Now if you publish these settings this should give you something similar to what you want. However, some additional CSS may be required.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
JawDesigns

That's exactly what I wanted Danny, thanks! However, the highlight sections overall height is too small so I'll need to fix this with a little CSS.

 

Thanks for your help!


James Wilson

Designer & Photographer

 

Share this post


Link to post
Share on other sites

×