Skip navigation
Currently Being Moderated

fluid Dreamweaver background image

Sep 4, 2013 6:41 AM

Tags: #dreamweaver #fluid_grid

Hi,

 

I created a fluid html5 page and it's background image looks fine when it is at the desk top size, but when the browser shrinks to mobile or ipad size back ground image resizes and shrinks!

I tested it in ipad and mobile and it shows the same issue!

 

is there anyone to help me with this issue?

 

 

Thanks,

 
Replies
  • Currently Being Moderated
    Sep 4, 2013 8:16 AM   in reply to Shirin_B

    Could you post a link to the page so we can see the code in action?

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 4, 2013 12:45 PM   in reply to Shirin_B

    Answers are in your code.  If you don't want the background-image to resize, you'll need to locate the relevant CSS code.  The quickest way to do that is inside Firefox or Chrome with right click and select Inspect Element.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 5, 2013 6:33 AM   in reply to Shirin_B

    Your background is set to background-size: 100%; in your css. This means that the width is 100% of the containing element which changes when the window is resized due to the width:100%; being on the body as well.

     

    If you remove background-size:100%; the background image will stay the same size no matter how large the viewport is.


    EDIT: You aren't actually losing the bg image, it's just moving behind your iframes. The background of iframes will always be, at minimum, white when compared to the page they are inserted on. There is no way I have ever seen to make an iframe background transparent so it's continaing page shows its background through the iframe.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points