Jump to content


Photo
- - - - -

Header & Footer - Responsive BG image

responsive scale header footer background

  • Please log in to reply
17 replies to this topic

#1 integritymediacorp

integritymediacorp

    Advanced Member

  • Members
  • 35 posts
  • Country: Country Flag

Posted 04 April 2013 - 07:00 PM

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!



#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 04 April 2013 - 07:49 PM

Can you please post a link to your site?



#3 integritymediacorp

integritymediacorp

    Advanced Member

  • Members
  • 35 posts
  • Country: Country Flag

Posted 04 April 2013 - 07:50 PM

Please Login or Register to see this Hidden Content



#4 integritymediacorp

integritymediacorp

    Advanced Member

  • Members
  • 35 posts
  • Country: Country Flag

Posted 04 April 2013 - 08:30 PM

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



#5 James B

James B

    Advocate

  • Moderators
  • 4983 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 04 April 2013 - 08:55 PM

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

 

Please Login or Register to see this Hidden Content

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



#6 integritymediacorp

integritymediacorp

    Advanced Member

  • Members
  • 35 posts
  • Country: Country Flag

Posted 04 April 2013 - 10:46 PM

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

 

Please Login or Register to see this Hidden Content

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..



#7 James B

James B

    Advocate

  • Moderators
  • 4983 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 05 April 2013 - 12:06 AM

Hi there, i can only see this when i click on the link -

Please Login or Register to see this Hidden Content



#8 integritymediacorp

integritymediacorp

    Advanced Member

  • Members
  • 35 posts
  • Country: Country Flag

Posted 05 April 2013 - 04:21 PM

Hi there, i can only see this when i click on the link -

Please Login or Register to see this Hidden Content

sorry about that, I turned off this plugin



#9 mackenzie

mackenzie

    Advocate

  • Members
  • 333 posts
  • Country: Country Flag

Posted 05 April 2013 - 04:47 PM

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.



#10 integritymediacorp

integritymediacorp

    Advanced Member

  • Members
  • 35 posts
  • Country: Country Flag

Posted 05 April 2013 - 04:56 PM

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?



#11 integritymediacorp

integritymediacorp

    Advanced Member

  • Members
  • 35 posts
  • Country: Country Flag

Posted 05 April 2013 - 07:48 PM

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

Please Login or Register to see this Hidden Content



#12 James B

James B

    Advocate

  • Moderators
  • 4983 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 05 April 2013 - 10:53 PM

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.

 

Please Login or Register to see this Hidden Content

 

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.

 

Please Login or Register to see this Hidden Content



#13 integritymediacorp

integritymediacorp

    Advanced Member

  • Members
  • 35 posts
  • Country: Country Flag

Posted 08 April 2013 - 04:39 PM

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.

 

Please Login or Register to see this Hidden Content

 

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.

 

Please Login or Register to see this Hidden Content

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



#14 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 08 April 2013 - 08:58 PM

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.



#15 integritymediacorp

integritymediacorp

    Advanced Member

  • Members
  • 35 posts
  • Country: Country Flag

Posted 11 April 2013 - 07:49 PM

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



#16 James B

James B

    Advocate

  • Moderators
  • 4983 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 12 April 2013 - 12:15 AM

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.



#17 integritymediacorp

integritymediacorp

    Advanced Member

  • Members
  • 35 posts
  • Country: Country Flag

Posted 15 April 2013 - 04:57 PM

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.. 



#18 James B

James B

    Advocate

  • Moderators
  • 4983 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 16 April 2013 - 01:28 AM

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

Please Login or Register to see this Hidden Content

 

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.

Please Login or Register to see this Hidden Content

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


  • integritymediacorp likes this





Also tagged with one or more of these keywords: responsive, scale, header, footer, background