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

responsive backgrounds in header

2 posts in this topic

Hi guys and gals.

I'm trying to get this background image in my header to play nice and it just won't.

Take a look:


The issue is that the grass (which is only to stay behind the nav area as much as possible) is either too short on wide monitors or too tall when on mobile devices.


I figure it may be more of a graphic issue than a css, but some advice would be great.


Share this post

Link to post
Share on other sites

  • Similar Content

    • Popovers cut off screen edge.
      By respectgb+
      I'm having problems with bootstrap popovers being cut off the edge of the browser. I'm using the latest version of dms (2.2) and this problem occurs on all browsers tested. Please can you let me know how we can fix this?


    • Can I remove the play button that appears on canvas area background images on mobile?
      By crose+
      I am using the Canvas Area section at the top of my site. I have a video playing in the background, which works really well on desktop. But on mobile video doesn't play without user interaction, so I have a static image in place as an alternate image. However when viewed on a mobile device there is now a play button over the static image that does nothing. This didn't use to happen so I imaging it is due to an upgrade. But this is really bad UX. Is there a way to remove it?
      Here is the site:
      Thanks in advance.
    • Make page background fill whole screen
      By jeomiland+
      Have a couple clients who are having background image issues. This should be a basic question so hope fix is easy. How do you get a specified image to auto resize so it fills the browser screen? Client has portrait-format image that's 1000x1000 and the left and right are displaying the background color (white) on my 1440 wide Macbook pro, as it is on client's computer. She has tried clicking "Fit image to page" and repeat background - neither is getting what she expects.  I suggested trying a landscape-format image.
      But the larger question is this - how does one plan a proper background image that will fill the whole screen - left to right - in the browser image and have it scale appropriately?  Should one always have landscape background images? What about scrolling vs not scrolling BG? How plan your BG image so it will fill the screen on laptops, ipads, iphones...  both in landscape and portrait format? Is it true that you can't do it? that either the left-right or top-bottom are cut off depending on the device and orientation?
      2 sites where this needs resolution:
    • Elements Update 5.0.3
      By hibbsy78+
      Mobile layout much better in 5.0.3. There appears to be an issue that it 'super-sizes' the background image?

    • BG Tile Size Setting Missing from Pagelines > Settings
      By dawsonbarber+
      Under PageLines > Settings, it looks like the actual setting for the background image tile size is missing.