Jump to content
vitordt

background image in Masthead

Recommended Posts

vitordt    0
vitordt

Hello guys,

 

I am having trouble putting an image background in Masthead.

 

There is a "margin" (blank space) I can't get rid off, as I would like to have a full display of the image in the background.

 

The page is: http://www.mindon.com.br/2013/

 

Hope someone can give me a hand :)

 

Regards,

Vitor

Share this post


Link to post
Share on other sites
vitordt    0
vitordt
For the background image to reach full-width you need to add a background image to the header instead (using custom css: http://www.pagelines.com/wiki/Custom_CSS).

 

Hi Catrina, thanks for your response.

 

I am sorry, but couldn't find the correct code to add a background image to the header.

 

I have tried this:

#header.container-group {background-image: url(
);}

 

But didn't work out.

 

Can you please give me a hint on this?

 

Thanks!

Share this post


Link to post
Share on other sites
loraxio    1
loraxio

Vitordt...

 

you need to specify the selector for the masthead...try:

 

 

 

.jumbotron.masthead {background-image: url(
' alt='' class='ipsImage' width="1000px" height="437px">' alt='' class='ipsImage' width="1000px" height="437px">);}

To get rid of the "blank margin"...add in this:

 

 


 

.jumbotron.masthead {background-image: url(
' alt='' class='ipsImage' width="1000px" height="437px">' alt='' class='ipsImage' width="1000px" height="437px">); margin-top: -10px;}

And adjust the negative margin until it is pixel perfect.

 

To get the whole dang width of the page to contain the image try:

 

 

 

#masthead .texture {background-image: url("
' alt='' class='ipsImage' width="1000px" height="437px">' alt='' class='ipsImage' width="1000px" height="437px">");margin-top: -10px;background-size: cover;background-repeat: no-repeat;

The background-size: cover makes it responsive.

}

Share this post


Link to post
Share on other sites
vitordt    0
vitordt

Vitordt...

 

you need to specify the selector for the masthead...try:

 

 

 

.jumbotron.masthead {background-image: url(
' alt='' class='ipsImage' width="1000px" height="437px">' alt='' class='ipsImage' width="1000px" height="437px">);}

To get rid of the "blank margin"...add in this:

 

 


 

.jumbotron.masthead {background-image: url(
' alt='' class='ipsImage' width="1000px" height="437px">' alt='' class='ipsImage' width="1000px" height="437px">); margin-top: -10px;}

And adjust the negative margin until it is pixel perfect.

 

To get the whole dang width of the page to contain the image try:

 

 

 

#masthead .texture {background-image: url("
' alt='' class='ipsImage' width="1000px" height="437px">' alt='' class='ipsImage' width="1000px" height="437px">");margin-top: -10px;background-size: cover;background-repeat: no-repeat;

The background-size: cover makes it responsive.

}

Spot on, Loraxio. Many thanks !

Share this post


Link to post
Share on other sites
waltersrs    1
waltersrs

I've tried to replicate the information found in this post...but I have some problems.  See here:

 

http://education.randy-walters.com

 

It is almost there...here is the custom css that I've stolen used:

 

 

.jumbotron.masthead {background-image: url(http://www.mindon.com.br/imagens/launch.jpg);}

.jumbotron.masthead {background-image: url(http://www.mindon.com.br/imagens/launch.jpg); margin-top: -10px;}

#masthead .texture {background-image: url("http://www.mindon.com.br/imagens/launch.jpg");margin-top: -10px;background-size: cover;background-repeat: no-repeat;}

 

What am I missing/doing wrong?  Please help.  

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%; } }  
×