-2

I added a banner into a webpage, www.torontopoet.com/etsystories and now below the banner is a huge chunk of blank space before the content begins. This is the code I used for the banner:

<div id="banner"> 
</div>
 <style>
html,body
{ height:100%;
width:100%;
}
#banner {
background:url('.png');
width:100%;
height:100%;
background-size:100%;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
 }
</style>
A.Bo
  • 3
  • 3

2 Answers2

1

Without seeing your HTML too, I really can't say anything, but...

#banner {
background:url('.png');
width:100%;  
height:100%; <!--- ? --->
background-size:100%;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
}

Are you sure you want the banner to be 100% of the height of its container?

David Dylan
  • 214
  • 1
  • 10
  • Probably not? If I change the height to a px amount, the white space goes away but then the content can cover the banner when the browser size is distorted. – A.Bo Dec 20 '16 at 01:19
  • Really need to see HTML before I can say anything sensible about that... – David Dylan Dec 20 '16 at 01:26
  • Hi David, the website is www.torontopoet.com/etsystories – A.Bo Dec 22 '16 at 19:32
  • I had a quick look, but I really think you have bigger worries. Sorry. Try to get it to validate first. From what I see your content won't cover your banner, though. – David Dylan Dec 22 '16 at 20:22
  • Thanks for looking. I don't think the content will cover the banner but the content appears much lower than the banner, especially on a phone. – A.Bo Dec 22 '16 at 20:45
  • These steps I would take: validate. (https://validator.w3.org/) because nothing you do makes sense until you know the code isn't throwing a curve-ball. Then use media queries to tweak for mobile. Also consider loading times on mobile. Is your banner worth losing customers? A light version for mobile is a very good idea, imho. – David Dylan Dec 23 '16 at 12:06
  • Fair enough. Would there be a code to just simply override the default title so it displays something unique? @daviddylan? – A.Bo Dec 23 '16 at 16:17
  • For that, you'd have to look at the settings of the package that generates the code. There's ways to do it after the fact, but that's not very efficient. And if all else fails you could use css + media queries to hide it altogether. – David Dylan Dec 27 '16 at 07:58
0
html,body
{ 
height:100%;
width:100%;
}
#banner 
{
background:url('http://cdn2.hubspot.net/hubfs/418991/realview.jpg');
width:400px;
height:251px;
display:block;
background-size:cover;
background-repeat: no-repeat;
margin:0 auto;
}
Payal2299
  • 148
  • 6
  • 1
    Explain how this code is going to help the OP. – Maveňツ Dec 20 '16 at 06:46
  • if you specify correct height and width then banner background image cover whole portion and don't have white spacing issue – Payal2299 Dec 20 '16 at 21:15
  • **As this answer was flagged as Inappropriate.** (not an answer) Better edit your answer and add the information how this will resolve the problem of OP. That's why I am saying this again so that this answer won't be downvoted and deleted in future by the [Moderators](http://stackoverflow.com/help/site-moderators) – Maveňツ Dec 21 '16 at 04:45
  • Please check this jsfield https://jsfiddle.net/payal2299/1f56u4x6/4/ – Payal2299 Dec 21 '16 at 21:07