Jump to content
integritymediacorp

Header & Footer - Responsive BG image

Recommended Posts

integritymediacorp

Hi,

 

I make a background image in header and footer, how to make responsive it?

I try use the "max-width" and "min-width", but it's not work correct and try to change "px" to "%" nothing works..

 

Thank you!

Share this post


Link to post
Share on other sites
integritymediacorp

btw, here is my goal, I need to do that background image under top-menu...

 

Screen-shot-2013-04-04-at-1.24.16-PM1.pn

Share this post


Link to post
Share on other sites
James B

Hi there, if you apply your image as a background using css to the section and the site is set to a responsive layout you shouldn't have to set the width manually, just enter the image into the container, like

 

#header {background:url(yoururl.jpg);} 

We're unable to access your site as you have a coming soon plugin active.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
integritymediacorp

Hi there, if you apply your image as a background using css to the section and the site is set to a responsive layout you shouldn't have to set the width manually, just enter the image into the container, like

 

#header {background:url(yoururl.jpg);} 

We're unable to access your site as you have a coming soon plugin active.

Hi, I don't have a coming soon plugin.. I try this CSS code, it's work but he is still not responsive..

Share this post


Link to post
Share on other sites
James B

Hi there, i can only see this when i click on the link - http://screencast.com/t/OU4DBcN1nBF9


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
mackenzie

I see you background image and when I view it in Chrome adjusting the browser to different sizes it does appear your site is being responsive to the changes. However there are some things I am noticing. The black ThinkSpace graphic is overlaying the blue background and at some points hiding the words/background behind it. Do you want this to happen? Your menu option are responsive however they are all over the place when I shrink the screen. So I think it's just narrowing down what you would like to be the final look.


Mackenzie - PageLines Help Desk

The Centsible Family - Writer, Photographer and Coffee Addict

---------------------------------------------------

Kindly search this forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

Share this post


Link to post
Share on other sites
integritymediacorp

I see you background image and when I view it in Chrome adjusting the browser to different sizes it does appear your site is being responsive to the changes. However there are some things I am noticing. The black ThinkSpace graphic is overlaying the blue background and at some points hiding the words/background behind it. Do you want this to happen? Your menu option are responsive however they are all over the place when I shrink the screen. So I think it's just narrowing down what you would like to be the final look.

My black ThinkSpace graphic (Logo) here because I try to solve this problem and I think I will try to use the <div> for each side and make width in % for the middle graphics, maybe I can fix this problem. Here is no function to add background to menu or header?

Share this post


Link to post
Share on other sites
integritymediacorp

any ideas? Nothing works... How can I make responsive the top menu? I don't know how, but it's work with the image, but when I in Chrome adjusting the browser to different sizes my top menu go down all the time :(

 

take a look this page

http://migrationspace.com/our-process/

Share this post


Link to post
Share on other sites
James B

Hi there, I've looked through your site and it seems you have the bg image inserted twice. Once as a bg to the header, and again as a bg to the nav.

 

http://screencast.com/t/w86oNetyRUQx

 

If you remove the header image and then apply the 'background-size:100%;' commands to the css in the navbar menu the image fits the screen width.

 

http://screencast.com/t/xqDaqTkx


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
integritymediacorp

Hi there, I've looked through your site and it seems you have the bg image inserted twice. Once as a bg to the header, and again as a bg to the nav.

 

http://screencast.com/t/w86oNetyRUQx

 

If you remove the header image and then apply the 'background-size:100%;' commands to the css in the navbar menu the image fits the screen width.

 

http://screencast.com/t/xqDaqTkx

ok, its more close to what I need, but when I change the browser size to maximum and this background  image going to be huge, I try to make 'background-size:100% auto;' or 'background-size:100% 100%;' or max-height: 127px; nothing work. do you know how to fix it?

Screen-shot-2013-04-08-at-9.32.31-AM.png

 

 

 

and how to connect menu with this background? because it looks separate

Screen-shot-2013-04-08-at-9.36.24-AM.png

Share this post


Link to post
Share on other sites
Rob

Hi,

 

Let me explain a bit about 'responsiveness'.  You are placing the background in the header and it is fully responsive.  The menu is also responsive, but it will not fall within the context of the header. By nature, the menu will appear below the header background, which will not stretch to match the height of your menu.  To affect the desired style, you need a different way of creating the graphic background.

 

You'd need to come up with a different way to apply this design.  To do it properly, you'll need a Pro designer/developer.  The reason for this is that in normal circumstances, when a menu is viewed in mobile view, it is not viewed straight across. Rather, the menu items 'wrap' and increase in size to ensure they're seen. 

 

In your design, the background isn't behind the menu but in the header.  The header doesn't rescale vertically or do anything but narrow down to match the width of the screen upon which it is viewed.  Since your image is staying within that scope and resizes according to the screen width, it is fully responsive.

 

You may want to try going to Dashboard > PageLines > Site Options > Layout Editor and check the box for Disable Mobile View.  Your site will still be visible on mobile devices, but the menu will be very small and will not wrap.  It will look exactly the same as in any other browser, just much smaller.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
integritymediacorp

Ok thank you!

but I still have a issue, but now I made it more match with mockups.

Screen-shot-2013-04-11-at-12.40.03-PM.pnScreen-shot-2013-04-11-at-12.40.31-PM.pn

Screen-shot-2013-04-11-at-12.40.45-PM.pn

 

 

 

 

and here is when you open menu... looks really weird, because I'm use default NavBar

Screen-shot-2013-04-11-at-12.47.23-PM.pn

Share this post


Link to post
Share on other sites
James B

Hi there, the mobile version of the navbar menu will display differently to the desktop, you'll need to use browser specific css to apply a background behind the submenus so the user will be able to see the text clearly.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
integritymediacorp

Hi there, the mobile version of the navbar menu will display differently to the desktop, you'll need to use browser specific css to apply a background behind the submenus so the user will be able to see the text clearly.

You know which one submenus css I have to use? Because I tried everything and nothing change or do my top menu responsive, but it's supposed to be, because Im use default menu.. 

Share this post


Link to post
Share on other sites
James B

Well when in mobile view the background color which goes behind the background link is controlled by

.navbar.pl-color-blue {

    background-color: #5E8DC8;
    background-image: -moz-linear-gradient(center top , #6E9ED2, #4574B8);
    background-repeat: repeat-x;
    border-top: 1px solid #4574B8;
}

 

But you will have removed that and added your own image background.

 

So you'll need to apply your background color in a different way, possibly to the li tab for the dropdown, but you'll need to download the browser specific css plugin and apply the relevant browser code infront of the css so it doesn't effect the desktop version, as you want it just to effect the mobile layout. Something like the below will add a color behind the menu links on your mobile site.

body.mobile .navbar .navline > li > a {
    background: #000000;
}

Your menu is responsive, it's going from the main menu to the mobile menu when the screen size changes.

  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • stijnxo
      By stijnxo+
      Is there a way to disable the responsive function of your iBoxes?
      I do not want all iBoxes underneath each other on mobile, is there a way to fix columns or group boxes?
      I use them for small links and want them to stay next to each other, see attachment
      Please let me know.



    • Paul
      By Paul+
      I was surprised to see I had no menu today - out of the blue - its actually moved to the bottom of the page!  After hours of fiddling and disabling every single plugin, leaving just plagelines the issue is still present.  See video for a basic text box - I moved it into the head and it jumps to the bottom and shows just above the footer but below the main content.  I have a temp fix by placing the menu into the first row on the main content but it does mean other than my home page, all other pages have no menu.  A quick fix is very urgent for this bug.
      https://thelaptopfixers.com
       
       
    • russe-intensif
      By russe-intensif+
      Hi team,
      checking my site today, i'm surprised to see my MegaNav all in bottom of the pages, while it's in header.
      After getting to change it in couple of pages onto Template part (too time consuming !), i'm desperate and ask you for help :-)
      apprendre-le-russe-avec-ania.fr
      Thank you in advance !

    • lionel1
      By lionel1
      Hi,
      I use on my home page " impulse module " but when i look on my iPhone the image is cut and not responsive .
      i only have this problem with this module not with the other one .
      thanks for ur help
      website / www.elonakane.com 
      Lionel 
       
×