Hi there, I have been retired now for a few years, however, the “Over 50’s resort” we have moved into asked me to make them a website. However, I am having trouble getting the background image to cover more of the page. It can be seen at www.glpp.com.au By the way, the current coding is on color.css
== AFTER HEADER SECTION ==============================================*/ #outerafterheader{ border:solid #ccc; border-width:9px 0px; background:url(…/images/bg1.jpg);}
I’ve tried adding max-width:100%; height:auto; object-fit:cover; and (contain) but nothing seems to move it much. I would like it to start a bit further up the page and stretch a bit further down. The actual image size is 1690 x 982 so there is a bit below currently hidden.
You are going the wrong way about this as you can’t use magic numbers to make something like a background image fit. Massive negative margins are never going to work in this case.
I would place your image as a fixed position element to cover the whole viewport and remove the magic number margins.
Thanks for the help so far. That is sort of what I was looking for. I added 10 at the top to just drop the bg1 down a little as it took out the logo. (actually, anything above 1 took it down.)
However, how do I do something about the footer area as I believe that is an image also? The other item is that now the main body is slightly smaller than the header.
I have put it up as a test page https://www.index-test.htm so you can see it. And put the new css in a new index-color.css file too so as not to affect any other pages.
I’m also wondering if the opaque/pale grey behind the header section wouldn’t look better if it went down to just where the footer image started? (Over the BG1) That would balance out the width all the way down and do away with the BG showing thru the gaps between sections.
On #footer you need to add position:relative to bring the footer background above the background image.
Otherwise it seems to work ok
Note that you have written top:10 ? What is 10? 10 miles or 10 lightyears
The browser has ignored that and you get top:auto which may be exactly what you wanted by a stroke of luck Change it to top:auto (or worst case add a real unit (but then you are back to magic numbers as you never know what that value should be at any given moment).
Thanks Paul, That is getting better - the footer background now shows. Is it possible to get the pale grey background that continues down below the header section which currently goes behind the bg1 to actually show on top of it, thereby keeping the width consistency going down the page?
I just tried something else and I think I have answered my own question. I used the position:relative on the #maincontainer and now appears to look correct. Can you please check it and advise. If all OK, I will add to the real page which is /index.php
I’m not seeing that style applied but I don’t really know what you mean as the page (https://www.glpp.com.au/index-test.htm) is looking as I expected it to look now.
I don;t see a need for any other changes to the backgrounds.
Thank you Paul, That’s what I was hoping you would say. I thought I had it all correct. Now for the second little problem I have. The homeowners committee has asked me if we could have a “Breaking News” box on the front page to announce any upcoming events. As I had done this on another site several years ago, I thought I could just copy & paste the coding over. The other customer no longer uses this system so I can’t send you the link to look. However I still had the page in my archives and when I view it in browser, it works perfectly. Pops up as soon as you click. Therefore, I thought if I just copy over all the CSS, HTML & JS files, all should go. But, NO. Doesn’t work. I have looked at both again & again and can’t see where I have gone wrong. The page for you to look at is https://www.glpp.com.au/index-popup.php Additionally if we can get it to work, I would like the image in the middle.
Thanks!
I now have another little problem doing my head in. The committee currently want to have two (2) popups. I have got them working no problem. However, being two I wanted to have them central. The first one is to announce the AGM which is coming up end of August and the 2nd one is to invite all the “Volunteers” to a function thanking them for their past years service.
So, to my problem, I have removed one of the videos which was dead centre and am trying to get the two popups on top of each other in the video’s place. I have succeeded in that but the other video (right hand one) I can’t seem to get in place. It shows all narrow below the “Thank you” popup. I believe it is possibly a simple
problem, but I have tried many combos, to no avail.
Can you please take a look? Twin Popup page
Another little problem, the AGM notice (top one) works once, then after clicking the second one, the top one (sometimes) won’t work again without refreshing the page?
Thanks.
The third column is under the second column and only about an 100px wide as it seems you have double nested the one-third columns inside each other here.
<div class="item one_third columns">
<div class="ts-pf-img">
<div class="center-div">
<br>
<a class="trigger_popup_fricc2"><img src="images/important.jpg"></a>
<div class="hover_bkgr_fricc2">
<span class="helper"></span>
<div>
<div class="popupCloseButton">X</div>
<h1>
<font color="#ff0000"><strong>29th August 2023.</strong></font>
</h1>
<h2>
<font color="#0047AB"><strong>GEMLIFE PACIFIC PARADISE HOMEOWNERS COMMITTEE ANNUAL GENERAL MEETING<br>
IN THE PAVILION COMMENCING AT 10AM.</strong></font>
</h2>
<h3><strong>Your attendance and contribution is important. Nominations close 8th August 2023. Postal votes welcome.</strong></h3>
<div class="center-div"><img src="images/agm.jpg" alt="AGM"></div>
</div>
</div>
<br>
<br>
<a class="trigger_popup_fricc"><img src="images/thank-you3.jpg"></a>
<div class="hover_bkgr_fricc">
<span class="helper"></span>
<div>
<div class="popupCloseButton">X</div>
<h1>
<font color="#ff0000"><strong>10th August 2023.</strong></font>
</h1>
<h2>
<font color="#0047AB"><strong>1pm till 3 pm in the Pavilion. Drinks and Nibbles provided.</strong></font>
</h2>
<h3><strong>Your HOC would like to thank all volunteers who have contributed to our Community over the past year.
Our beautiful and friendly Community would not have been able to move forward if not for the dedicated volunteers that have given their time and expertise in so many ways;<br>
You know who you are, so just come along and have a great afternoon.</strong></h3>
<div class="center-div"><img src="images/volunteers.png" alt="AGM"></div>
</div>
</div>
<br>
<div class="clear"></div>
</div>
</div>
<br>
<br>
<div class="item one_third columns">
<div class="ts-pf-img">
<a class="pfzoom" href="images/pool-house2-1.jpg" data-rel="prettyPhoto[mixed]" title="Pavilion Ground Floor showing Pool Table and BBQ area." rel="prettyPhoto[mixed]">
<span class="rollover" style="opacity: 0; display: inline;"></span>
<img src="images/pool-house2-1.jpg" alt=" ">
</a>
</div>
<div class="ts-pf-text">
<h3 class="pftitle"><a href="#" title="Pavilion Ground">Pavilion Ground Floor and BBQ area.</a></h3>
<div class="textcontainer">
The lower floor of our Pavilion with Pool Table and chairs so you can enjoy a drink and the cooling breezes, and of course, the pool view.
</div>
<div class="more-container"><a href="pavilionopen.htm" class="more-link">Video Pavilion Opening Day</a></div>
</div>
<div class="clear"></div>
</div>
</div>
The one-third columns should be on the same level not nested in each other. It looks like you have inserted the last column one div too soon. Move the closing div at the end of that section to above the last column.
<br>
<br>
</div><!-- this was right at the end and I moved it here -->
<div class="item one_third columns">
<div class="ts-pf-img">
<a class="pfzoom"
It should then look like this for the whole row:
<div class="row ">
<div class="item one_third columns">
<div class="ts-pf-img">
<a class="pfzoom" href="images/pp-entrance1.jpg" data-rel="prettyPhoto[mixed]" title="Main entrance." rel="prettyPhoto[mixed]">
<span class="rollover" style="opacity: 0; display: inline;"></span>
<img src="images/pp-entrance1.jpg" alt=" ">
</a>
</div>
<div class="ts-pf-text">
<h3 class="pftitle"><a href="" title="Main Entrance">Main Entrance to Gemlife</a></h3>
<div class="textcontainer">
The <span class="style1"></span>imposing main entrance features large palms and a secure gate which opens via key pad or number plate recognition giving access to wide boulivards.
</div>
<div class="more-container"><a href="overview.htm" class="more-link">Video Resort Overview</a></div>
</div>
<div class="clear"></div>
</div>
<div class="item one_third columns">
<div class="ts-pf-img">
<div class="center-div">
<br>
<a class="trigger_popup_fricc2"><img src="images/important.jpg"></a>
<div class="hover_bkgr_fricc2" style="display: none;">
<span class="helper"></span>
<div>
<div class="popupCloseButton">X</div>
<h1>
<font color="#ff0000"><strong>29th August 2023.</strong></font>
</h1>
<h2>
<font color="#0047AB"><strong>GEMLIFE PACIFIC PARADISE HOMEOWNERS COMMITTEE ANNUAL GENERAL MEETING<br>
IN THE PAVILION COMMENCING AT 10AM.</strong></font>
</h2>
<h3><strong>Your attendance and contribution is important. Nominations close 8th August 2023. Postal votes welcome.</strong></h3>
<div class="center-div"><img src="images/agm.jpg" alt="AGM"></div>
</div>
</div>
<br>
<br>
<a class="trigger_popup_fricc"><img src="images/thank-you3.jpg"></a>
<div class="hover_bkgr_fricc" style="display: none;">
<span class="helper"></span>
<div>
<div class="popupCloseButton">X</div>
<h1>
<font color="#ff0000"><strong>10th August 2023.</strong></font>
</h1>
<h2>
<font color="#0047AB"><strong>1pm till 3 pm in the Pavilion. Drinks and Nibbles provided.</strong></font>
</h2>
<h3><strong>Your HOC would like to thank all volunteers who have contributed to our Community over the past year.
Our beautiful and friendly Community would not have been able to move forward if not for the dedicated volunteers that have given their time and expertise in so many ways;<br>
You know who you are, so just come along and have a great afternoon.</strong></h3>
<div class="center-div"><img src="images/volunteers.png" alt="AGM"></div>
</div>
</div>
<br>
<div class="clear"></div>
</div>
</div>
<br>
<br>
</div>
<div class="item one_third columns">
<div class="ts-pf-img">
<a class="pfzoom" href="images/pool-house2-1.jpg" data-rel="prettyPhoto[mixed]" title="Pavilion Ground Floor showing Pool Table and BBQ area." rel="prettyPhoto[mixed]">
<span class="rollover" style="opacity: 0; display: inline;"></span>
<img src="images/pool-house2-1.jpg" alt=" ">
</a>
</div>
<div class="ts-pf-text">
<h3 class="pftitle"><a href="#" title="Pavilion Ground">Pavilion Ground Floor and BBQ area.</a></h3>
<div class="textcontainer">
The lower floor of our Pavilion with Pool Table and chairs so you can enjoy a drink and the cooling breezes, and of course, the pool view.
</div>
<div class="more-container"><a href="pavilionopen.htm" class="more-link">Video Pavilion Opening Day</a></div>
</div>
<div class="clear"></div>
</div>
</div>
BTW don’t use breaks to make space as that’s not what they were intended for and only serve further to confuse the mark up
Breaks should only be used to break a line of text such as in a poem, song or an address or after inline (usually form) elements to move to a new line. They should not be used for paragraph endings or making space.
We have margins (or padding) which are more controllable and easy to apply without any non semantic markup as you just apply the margin to the element in question. Your elements should be consistent anyway and you would generally have the same margin on similar structures built in from the start,
Change it to top:auto (or worst case add a real unit (but then you are back to magic numbers as you never know what that value should be at any given moment).