Skip to main content
F
fiveflightsup
Known Participant
November 12, 2017
Answered

Div working with background

  • November 12, 2017
  • 3 replies
  • 1508 views

Could someone please look at this and tell me how to get the calendar div to follow the background and stay aligned when it's in full screen. view.

Texans December 2017

Thanks in advance

d.

This topic has been closed for replies.
Correct answer osgood_

As a designer, I strive to find solutions even if they'll not all 100%


fiveflightsup  wrote

As a designer, I strive to find solutions even if they'll not all 100%

You may find the code below useful. Its not responsive but will work if that is not a concern to you. Your original coding did not look as though you were taking responsive into consideration - as others have said the concept would be difficult to achieve without some rethinking to make it responsive.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>Calender</title>

<style>

* {

box-sizing: border-box;

}

body {

font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;

background-color: #C83740;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

min-width: 1100px;

}

.calendar_wrapper {

display: flex;

justify-content: center;

background-image: url(calendar.png);

background-repeat: no-repeat;

height: 770px;

width: 1025px;

border: 1px solid #000;

}

.calendar_dates {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

margin-top: 115px;

position: relative;

width: 795px;

height: 600px;

}

.day {

display: flex;

align-items: center;

justify-content: flex-end;

width: 14%;

padding: 0 15px;

background-color: rgba(255, 255, 255, 0.7);

color: #F00;

margin-bottom: 2px;

font-size: xx-large;

font-weight: 600;

}

.date {

display: flex;

align-items: center;

justify-content: flex-end;

width: 14%;

padding: 0 15px;

background-color: rgba(0, 0, 61, 0.4);

color: #fff;

margin-bottom: 2px;

font-size: 24px;

font-style: normal;

font-weight: bold;

}

</style>

</head>

<body>

<div class="calendar_wrapper">

<div class="calendar_dates">

<div class="day">S</div>

<div class="day">M</div>

<div class="day">T</div>

<div class="day">W</div>

<div class="day">T</div>

<div class="day">F</div>

<div class="day">S</div>

<div class="date"></div>

<div class="date"></div>

<div class="date"></div>

<div class="date"></div>

<div class="date"></div>

<div class="date"><span>1</span></div>

<div class="date"><span>2</span></div>

<div class="date">3</div>

<div class="date">4</div>

<div class="date">5</div>

<div class="date">6</div>

<div class="date">7</div>

<div class="date">8</div>

<div class="date">9</div>

<div class="date">10</div>

<div class="date">11</div>

<div class="date">12</div>

<div class="date">13</div>

<div class="date">14</div>

<div class="date">15</div>

<div class="date">16</div>

<div class="date">17</div>

<div class="date">18</div>

<div class="date">19</div>

<div class="date">20</div>

<div class="date">21</div>

<div class="date">22</div>

<div class="date">23</div>

<div class="date">24</div>

<div class="date">25</div>

<div class="date">26</div>

<div class="date">27</div>

<div class="date">28</div>

<div class="date">29</div>

<div class="date">30</div>

<div class="date">31</div>

<div class="date"></div>

<div class="date"></div>

<div class="date"></div>

<div class="date"></div>

<div class="date"></div>

<div class="date"></div>

</div>

<!-- end calendar_dates -->

</div>

<!-- end calendar  -->

</body>

</html>

3 replies

pziecina
pziecina
Legend
November 12, 2017

You could do it, but there is at the moment a very,very, big BUT.

It would only work for about 70% of your users, and even though flexbox fallback is possible it would require a complete re-think of how your page would look on mobile devices, (and would probably require that anyway in order to remain usable).

The answer would be to use css grid layouts, which even at the moment is not very well understood by many experienced web developers.

If you do however feel up-to the challenge, you should become proficient in css grid layouts, and in particular the use of content alignment and media-queries, for css grid layout tutorials see -

https://gridbyexample.com

and the resorces section, in particular the old IE specs, and the new spec should be well understood, see -

https://caniuse.com/#feat=css-grid

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
November 12, 2017

You''re trying to nail jelly to the wall.  It won't work.

Nancy O'Shea— Product User & Community Expert
F
fiveflightsupAuthor
Known Participant
November 12, 2017

Most things are possible and I will continue to believe, but thanks.

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
November 12, 2017

Faith is a wonderful thing.  But misguided faith is futile.  Your table is not responsive yet viewport sizes vary drastically.  You could write all the CSS media queries in the world and this will never line up exactly where you want it on every device.  You've painted yourself into a corner with a design concept that's too precise for the web.  Although it might work well as an image.

Nancy O'Shea— Product User & Community Expert
BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
November 12, 2017

Here are some examples Perfect Full Page Background Image | CSS-Tricks

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
F
fiveflightsupAuthor
Known Participant
November 12, 2017

Sorry, I don't see that this works for this specific problem. Can you give it another look?

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices