Public Forums 71,145 posts

[bigrats Friend bigratsJoin date: June 2015Posts: 26Downloads:8Uploads:4 Thanks: 7 Thanked: 3 times in 1 posts]

#208216

I’ve made different html modules for masthead position on different menu.

i want to know how to set full width background image for masthead position on different menu.

and how about the proper image size for the background images ?

thanks

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#576483

If you want to show fullwidth for masthead position, you can use this way

Create templates/purity_iii/css/custom.css file and add new rule

.page-masthead .container {
padding: 0px;
margin: 0px;
width: 100%;
}

[bigrats Friend bigratsJoin date: June 2015Posts: 26Downloads:8Uploads:4 Thanks: 7 Thanked: 3 times in 1 posts]

#576957

thanks, and can i use different background image in masthead for different menu?

i try masshead module, but didnt work.

[bigrats Friend bigratsJoin date: June 2015Posts: 26Downloads:8Uploads:4 Thanks: 7 Thanked: 3 times in 1 posts]

#643265

thanks, and can i use different background image in masthead for different menu?

i try masshead module, but didnt work.

[bigrats Friend bigratsJoin date: June 2015Posts: 26Downloads:8Uploads:4 Thanks: 7 Thanked: 3 times in 1 posts]

#741919

thanks, and can i use different background image in masthead for different menu?

i try masshead module, but didnt work.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#577125

Yes, you can config the background image with each menu item with this guide here and find 4. Use extra parameters

1 user says Thank You to Ninja Lead for this useful post

1. bigrats

[bigrats Friend bigratsJoin date: June 2015Posts: 26Downloads:8Uploads:4 Thanks: 7 Thanked: 3 times in 1 posts]

#577392

Thanks,

but i dont really know how to deal with these code from the guide you gave me.

after i put the example from the guide, it became like :

how to fix it ??

thanks a lot !!!!

[bigrats Friend bigratsJoin date: June 2015Posts: 26Downloads:8Uploads:4 Thanks: 7 Thanked: 3 times in 1 posts]

#643689

Thanks,

but i dont really know how to deal with these code from the guide you gave me.

after i put the example from the guide, it became like :

how to fix it ??

thanks a lot !!!!

[bigrats Friend bigratsJoin date: June 2015Posts: 26Downloads:8Uploads:4 Thanks: 7 Thanked: 3 times in 1 posts]

#742336

Thanks,

but i dont really know how to deal with these code from the guide you gave me.

after i put the example from the guide, it became like :

how to fix it ??

thanks a lot !!!!

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#577447

You can pm me URL of your site and admin login backend site. I will help you out

1 user says Thank You to Ninja Lead for this useful post

1. bigrats

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#643744

You can pm me URL of your site and admin login backend site. I will help you out

1 user says Thank You to Ninja Lead for this useful post

1. bigrats

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#742391

You can pm me URL of your site and admin login backend site. I will help you out

1 user says Thank You to Ninja Lead for this useful post

1. bigrats

[juliejo Friend juliejoJoin date: July 2015Posts: 36Downloads:6Uploads:1 Thanks: 7]

#577485

I’ve done it this way, without the extra module – use the Div id that corresponds to your module id number (use developer tools ie firebug to find the correct div id) here its number 115
div#Mod115
{ background: url(“/images/image name.jpg”) no-repeat center center;
width: 100% !important; }

trouble is now Ive got to work out how to get the text nicely visible and remove unwanted margins.
Also the image is only going 100% of its own size not the screen size.
(so maybe better to use the masshead module anyway as presume it sorts all this out)
see it in progress in the masthead module postion here:
http://playground.cat.org.uk/postgraduate-courses/msc-sustainability-and-adaptation-planning

[bigrats Friend bigratsJoin date: June 2015Posts: 26Downloads:8Uploads:4 Thanks: 7 Thanked: 3 times in 1 posts]

#577487

Thanks,but my site is on localhost now, so is there other way to let me know how to fix it?

[bigrats Friend bigratsJoin date: June 2015Posts: 26Downloads:8Uploads:4 Thanks: 7 Thanked: 3 times in 1 posts]

#577488

Thanks , I’ll try.

<em>@juliejo 483002 wrote:</em><blockquote>I’ve done it this way, without the extra module – use the Div id that corresponds to your module id number (use developer tools ie firebug to find the correct div id) here its number 115
div#Mod115
{ background: url(“/images/image name.jpg”) no-repeat center center;
width: 100% !important; }

trouble is now Ive got to work out how to get the text nicely visible and remove unwanted margins.
Also the image is only going 100% of its own size not the screen size.
(so maybe better to use the masshead module anyway as presume it sorts all this out)
see it in progress in the masthead module postion here:
http://playground.cat.org.uk/postgraduate-courses/msc-sustainability-and-adaptation-planning</blockquote>

[Author]

Posts