Jump to content
Leonardo da Vinci

image background for Masthead section

Recommended Posts

Leonardo da Vinci+    3
Leonardo da Vinci

Hi supports

How to create a image background for Masthead section ?

How to make text of Masthead align to left and image to right ?

How to change the size and color of text ?

I would like the masthead be like the one below

https://kippt.com/

thanks

Share this post


Link to post
Share on other sites
batman    389
batman

Hi

You can try add in

PageLines > Site Options > Custom Code > CSS Rules

I give you same examples.


.masthead .masthead-title { font-size: 30px;}


.masthead .masthead-tag {

font-size: 24px;

line-height: 28px;}


.masthead h1, .masthead p {

text-align: left;}


.masthead .btn-large {

font-size: 16px;

padding: 7px 12px;}


.masthead .inner {

background: red;}

It is advisable to learn how to do this on your own too.

Check out http://www.pagelines...wiki/Custom_CSS

If you need more CSS help, make sure you've downloaded Firebug for Firefox

and check out W3 Schools for more info.

http://www.w3schools.com/

;)


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
Leonardo da Vinci+    3
Leonardo da Vinci

Thanks a lot Bat :ph34r:man

It is work grate but It is possible to add image background not a color background

thanks

Share this post


Link to post
Share on other sites
batman    389
batman

Hi again

Please,you can try with:

.masthead .inner {background-image: url (http://YOUR LINK IMAGE.jpg);}


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

The topic was marked as resolved.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • StuLeeUK
      By StuLeeUK+
      Good morning,
      I have set up my homepage using the Elements sections, a Masthead at the top and then a selection of Heroes lower down.
      I only just realised that the Heroes set a H1, as does the Masthead.
      Is there an easy way I can change the Heroes to an H2/H3 etc so as to improve the structure of my headers, whilst keeping the Masthead as H1?
      I really don't know much at all about CSS, which is why I use Pagelines because it's just so easy to create good looking pages without too much confusion.
       
      page for reference is https://www.avangocouriers.co.uk
      Thanks,
      Stu
    • nandorj78
      By nandorj78+
      I'd like to request a section (or that this could be enabled on the background settings of the existing sections) in which we could set a image to stay fixed, just as we can see in the link below:
      http://www.bootply.com/render/100702 (you can see 2 different background images and everything scrolls on top of it.)
      Is it possible to be done without having to code it via CSS every time?
    • jacobtippett
      By jacobtippett+
      Hi,
      I am trying to get the background image of the Revslider to be clickable and redirect to a link.
      Does anyone know how this is possible?
    • martinjrob
      By martinjrob+
      I am having problems in figuring out how to make the sections transparent so it shows 1 background color, Image.
      I have made all sections with no background colour as it suggests in pagelines docs
      this is the domain name http://www.socialwebservice.co.uk/ and this is how i would like it to look http://ecologysurveysinnorfolk.co.uk/
       
      Any help will be much appreciated. 
    • abuzzelli
      By abuzzelli+
      Trying to adjust the position of the background image on http://churchofwolves.com/. I need the wolf background to move over to the left on mobile versions so it can be seen. Here's the code I'm using and it's not working. I've tried a bunch of different things. Getting frustrated. Any advice?
      @media (max-width: 768px) { .home .site-wrap{ background: url(http://churchofwolves.com/wp-content/uploads/2015/06/Church-of-Wolves-bkgd1.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: 100% 0%; } }  
×