Jump to content


Photo
- - - - -

background image in Masthead

masthead background

Best Answer loraxio , 04 January 2013 - 05:16 PM

Vitordt...

 

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

 

 

 

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

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

 

 

 

 

 
.jumbotron.masthead {background-image: url(http://www.mindon.com.br/imagens/launch.jpg); 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("http://www.mindon.com.br/imagens/launch.jpg");margin-top: -10px;background-size: cover;background-repeat: no-repeat;

The background-size: cover makes it responsive.

}
Go to the full post


  • Please log in to reply
6 replies to this topic

#1 vitordt

vitordt

    Advanced Member

  • Members
  • 35 posts

Posted 04 January 2013 - 02:03 PM

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: 

Please Login or Register to see this Hidden Content

 

Hope someone can give me a hand :)

 

Regards,

Vitor



#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 04 January 2013 - 03:51 PM

For the background image to reach full-width you need to add a background image to the header instead (using custom css:

Please Login or Register to see this Hidden Content

).



#3 vitordt

vitordt

    Advanced Member

  • Members
  • 35 posts

Posted 04 January 2013 - 04:11 PM

For the background image to reach full-width you need to add a background image to the header instead (using custom css:

Please Login or Register to see this Hidden Content

).

 

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:

Please Login or Register to see this Hidden Content

 

But didn't work out.

 

Can you please give me a hint on this?

 

Thanks!



#4 loraxio

loraxio

    Advanced Member

  • Members

  • 54 posts
  • Framework Version:3.4.2
  • Country: Country Flag

Posted 04 January 2013 - 05:16 PM   Best Answer

Vitordt...

 

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

 

 

 

Please Login or Register to see this Hidden Content

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

 

 

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

And adjust the negative margin until it is pixel perfect.

 

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

 

 

 

Please Login or Register to see this Hidden Content

The background-size: cover makes it responsive.

}


#5 vitordt

vitordt

    Advanced Member

  • Members
  • 35 posts

Posted 04 January 2013 - 05:48 PM

Vitordt...

 

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

 

 

 

Please Login or Register to see this Hidden Content

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

 

 

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

And adjust the negative margin until it is pixel perfect.

 

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

 

 

 

Please Login or Register to see this Hidden Content

The background-size: cover makes it responsive.

}

Spot on, Loraxio. Many thanks !



#6 loraxio

loraxio

    Advanced Member

  • Members

  • 54 posts
  • Framework Version:3.4.2
  • Country: Country Flag

Posted 04 January 2013 - 07:48 PM

Yup...your welcome.



#7 waltersrs

waltersrs

    Member

  • Members

  • 25 posts
  • Country: Country Flag

Posted 23 January 2013 - 12:01 AM

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

 

Please Login or Register to see this Hidden Content

 

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

 

 

.jumbotron.masthead {background-image: url(

Please Login or Register to see this Hidden Content

);}

.jumbotron.masthead {background-image: url(

Please Login or Register to see this Hidden Content

); margin-top: -10px;}

#masthead .texture {background-image: url("

Please Login or Register to see this Hidden Content

");margin-top: -10px;background-size: cover;background-repeat: no-repeat;}

 

What am I missing/doing wrong?  Please help.  







Also tagged with one or more of these keywords: masthead, background