Jump to content


Photo
- - - - -

Adding a background image to a Callout section

Callout Background Image

Best Answer Danny , 12 May 2013 - 09:17 AM

Hi,

 

If you want to add an image to a section in this case the Callout, I recommend you inspect the section using Google Chrome's web dev tools. When you do, you will notice that all sections have similar classes for the Callout.

 

For example:

 

.section-sectionname

 

The Callout section called looks like this.

 

.section-callout

 

You can then use this class to add a background to the callout section you may need to use a PageLines override, you can find more information on the PageLines override on our custom CSS documentation.

 

http://support.pagel...ion/custom-css/

 

 

Your code will look something like this:

 
#site .section-callout { }
Go to the full post


  • Please log in to reply
1 reply to this topic

#1 clementsinz

clementsinz

    Member

  • Members
  • 13 posts
  • LocationFrance
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 12 May 2013 - 08:25 AM

Hi,

 

as mentioned I would like to add a background image to a callout or a highlight section.

 

I tried this code but it doesn't seem to work properly.

 

 

#callout.container.clone_1.section-callout.fix {
background-image:url('

Please Login or Register to see this Hidden Content

');
background-repeat:no-repeat;
}

 

Thanks for your help!



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 17532 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 12 May 2013 - 09:17 AM   Best Answer

Hi,

 

If you want to add an image to a section in this case the Callout, I recommend you inspect the section using Google Chrome's web dev tools. When you do, you will notice that all sections have similar classes for the Callout.

 

For example:

 

.section-sectionname

 

The Callout section called looks like this.

 

.section-callout

 

You can then use this class to add a background to the callout section you may need to use a PageLines override, you can find more information on the PageLines override on our custom CSS documentation.

 

Please Login or Register to see this Hidden Content

 

 

Your code will look something like this:

Please Login or Register to see this Hidden Content