Search jQuery

jQuery Forum

Edge to edge Banner

in jQuery Mobile • 2 years ago

Hello,

How would you manage to have a banner which goes from edge to edge, whatever the mobile device is ?

I tried many things but none seems to rescale the picture at the witdth of the screen.

thank you.

Replies(6)

alhogan

Re: Edge to edge Banner

2 years ago

would also like to know the answer to this, for example how does the banner on this website automatically adjust to fir the page

http://events.jquery.org/m/

demonmaker

Re: Edge to edge Banner

2 years ago

Just looking at the source of http://events.jquery.org/m/, they used a repeating one pixel wide image for the background. Then they placed the bay area image on the right of the div.

</div>

#logo {
  height: 150px;
  background: url(background.png) repeat-x;
  -webkit-background-size: 1px 150px;
  -moz-background-size: 1px 150px;
  background-size: 1px 150px;
  position: relative;
}

#logo .logo {
  position: absolute;
  right: 0;
  top: 0;
  margin: 0;
}

nbsp

Re: Edge to edge Banner

2 years ago

just place it between the <div data-role="header"> and <div data-role="content"> with a width of 100% and it will be displayed fullscreen

<div data-role="page">
      <div data-role="header">
            <h1> your titel </h1>
      </div> 

      <img src="/img/img.jpg" id="fullscreenImg" width="100%"/>

      <div data-role="content">
            content goes her

      [...]

</div>

alhogan

Re: Edge to edge Banner

2 years ago

Thanks for your help! width="100%" did the job

nbsp

Re: Edge to edge Banner

2 years ago

forgot to mention: the banner could get really high if you switch your device to landscape, keep that in mind

100% works but demonmakers sollution is better if you want the height to be the same in both landscape and portrait