Archived

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

  • 0

background image in Masthead


Question

Posted · Report post

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

6 answers to this question

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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

Posted · Report post

Yup...your welcome.

Share this post


Link to post
Share on other sites