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


This topic has been archived. This means that you cannot reply to this topic.
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

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

  • DMS Subscriber†
  • 54 posts

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

  • DMS Subscriber†
  • 54 posts

Posted 04 January 2013 - 07:48 PM

Yup...your welcome.



#7 waltersrs†

waltersrs

    Member

  • DMS Subscriber†
  • 25 posts

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.