Archived

This topic is now archived and is closed to further replies.

  • 0

Header & Footer - Responsive BG image


Question

Posted · Report post

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

17 answers to this question

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Can you please post a link to your site?

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites