Forum Support

Shape 5
March 28, 2024, 11:58:35 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: How can I set the floating Menu background image to 100% to avoid its repeat?  (Read 1091 times)
fahl5
Jr. Member
**
Offline Offline

Posts: 49



« on: December 24, 2014, 07:45:37 AM »

I chose Parts of the Background jpg as Background of the floating Menu. The problem is, that the Background is obviously set on 100% what means it changes its with the Window, while the Backgroud-image of the floating Menu.
Firebug locates "Inline:485", but what and where is "Inline" customizable???
best fahl5
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #1 on: December 24, 2014, 11:17:15 AM »

Hello,

I am not sure what you mean, the floating menu does not use a background image, it's set with a color. If you want an image to cover the entire area you would add:

background-repeat:none;
background-size:scale;
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
fahl5
Jr. Member
**
Offline Offline

Posts: 49



« Reply #2 on: December 24, 2014, 01:02:34 PM »

But....
The Floatingmenu "may" use a bg-image: Your Template offers this option to use a Backgroundimage for the floating menu. (see Template-backend-screenshot)

I used this opption but the image automaticalli is repeated, what makes awful edges where the image is repeated, (see bg-screenshot)
The Video as well as the jpg which is used are changing their size with the Window. that is just what I also want for the floating  menu background.

I simply have no Idea where (in which file) I should enter the code you mentioned !?

Firebug is not very helpful since it refers in relation to my backgroundimage to something called "inline:485" (see firebug-screenshot) this is as far I can see definitly no .css file I am able to customize. On the other hand I can not find any Templatesetting, that allows too decide repeat or non repeat of the Floating-Menu-BG.

But perhaps I can do somthing in an existing .css, what might overwrite thi "inline:485.
best
fahl5
« Last Edit: December 24, 2014, 01:06:01 PM by fahl5 » Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #3 on: December 26, 2014, 08:09:49 AM »

Hello,

Thanks for the clarification, you are better off removing the call in the backend of Vertex because that's meant just for repeating images. And then add the following to custom.css:

#s5_menu_wrap.s5_wrap_fmfullwidth {
background:url("http://test2.s-fahl.de/images/float-bg.jpg") no repeat top center !important;
background-size:scale !important;
}
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
chriddo
Jr. Member
**
Offline Offline

Posts: 216



« Reply #4 on: December 30, 2014, 07:02:20 AM »

Thanks Mike the above code works well for the top menu meaning the image bg will not repeat itself. However, it is not working for the "other" floating menu that appears when scrolling downwards .... then the image repeats itself again.

Any ideas on how to solve this?
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #5 on: December 30, 2014, 07:55:40 AM »

Hello,

Please post a live url to where this can be seen.
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
chriddo
Jr. Member
**
Offline Offline

Posts: 216



« Reply #6 on: December 30, 2014, 08:28:44 AM »

Hello,

Please post a live url to where this can be seen.

I am sending you a PM now with the URL as my site is not live yet.
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #7 on: December 31, 2014, 10:21:38 PM »

Thanks,

We will reply to your PM as soon as possible within regular business hours.
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
chriddo
Jr. Member
**
Offline Offline

Posts: 216



« Reply #8 on: January 03, 2015, 07:10:29 AM »

Please let me know if you have solved this "background repetition question" also for the Advanced Floating Menu (when having slided down).

Please do let me know if you need any clarification on this issue.

Hope to hear from you soon.

Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #9 on: January 03, 2015, 07:53:23 AM »

Hello,

I responded to you the other day in PM and said the login you provided did not work. I am waiting on correct login information for you.
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
chriddo
Jr. Member
**
Offline Offline

Posts: 216



« Reply #10 on: January 03, 2015, 07:57:03 AM »

Hello,

I responded to you the other day in PM and said the login you provided did not work. I am waiting on correct login information for you.

I can not see any PM from you (?) ... can you resend it please  Shocked
Logged
fahl5
Jr. Member
**
Offline Offline

Posts: 49



« Reply #11 on: January 06, 2015, 06:39:10 AM »

Hello,

Thanks for the clarification, you are better off removing the call in the backend of Vertex because that's meant just for repeating images. And then add the following to custom.css:

#s5_menu_wrap.s5_wrap_fmfullwidth {
background:url("http://test2.s-fahl.de/images/float-bg.jpg") no repeat top center !important;
background-size:scale !important;
}
Sorry I had no time to give your solution a try earlier. But sorry, but this simply did not work at all. The Picture is not at all found as bg. Picture. I switched back to the repeated version now, but this remains an unnecessary ugly situation.

Please give us simply, clear and working what we have to do, to get the backround not repeated.

Edit: After I have found other complains about other not working solutions using the custom.css, i wonder if it is perhaps simply this custom.css what does not work at all as it should?

best fahl5
« Last Edit: January 06, 2015, 06:57:33 AM by fahl5 » Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #12 on: January 06, 2015, 08:01:55 AM »

Hello,

There is a typo in my css above, this should work. I have tested it in firebug. Just add this to custom.css.

#s5_menu_wrap.s5_wrap_fmfullwidth {
background:url("http://test2.s-fahl.de/images/float-bg.jpg") no-repeat top center !important;
background-size:scale !important;
}

Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
fahl5
Jr. Member
**
Offline Offline

Posts: 49



« Reply #13 on: January 08, 2015, 09:39:32 AM »

Hello,

There is a typo in my css above, this should work. I have tested it in firebug. Just add this to custom.css.

#s5_menu_wrap.s5_wrap_fmfullwidth {
background:url("http://test2.s-fahl.de/images/float-bg.jpg") no-repeat top center !important;
background-size:scale !important;
}

OK that one step forward t least:
There is no more repeat and the bg.jpg is centered
that's not bad,
Now I just set the "background-size:" to 100% and now it behaves responsive as I wanted.
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #14 on: January 10, 2015, 04:36:17 PM »

Awesome glad you got it sorted!
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.