Skip to content
This repository has been archived by the owner on Dec 23, 2024. It is now read-only.

The background image should be responsive #4

Closed
jacobherrington opened this issue Aug 18, 2018 · 2 comments
Closed

The background image should be responsive #4

jacobherrington opened this issue Aug 18, 2018 · 2 comments
Labels
good first issue Good for newcomers

Comments

@jacobherrington
Copy link
Contributor

This is more of a design opinion than a bug, but I think the background image should resize with the window.

Current behavior:
The background image does not resize, leaving an empty space at the bottom of the screen that looks a bit unintentional.

screen shot 2018-08-18 at 12 46 51 pm

Expected behavior:
The background image resizes with the window.

screen shot 2018-08-18 at 12 50 05 pm

Note that there is still some space, this is due to the background image itself and is unavoidable using the current image:

screen shot 2018-08-18 at 12 52 43 pm

This would be a great issue for someone looking to learn how to make PRs on GitHub.
@devfake
Copy link
Owner

devfake commented Aug 18, 2018

Thanks for this! The empty space was intended. I had also tried a full background version, but I liked this more. However, I have no problem if someone wants to create a PR for it (:

@devfake devfake added the good first issue Good for newcomers label Aug 18, 2018
@alexweininger
Copy link

Not sure if recognized previously, but on higher resolution displays the background also leaves space on the right.

For reference - my display is 2560 x 1440 and using Chrome.
image

@msfern msfern mentioned this issue Oct 1, 2018
Open
DillonSimeone added a commit to DillonSimeone/years-to-read that referenced this issue Oct 2, 2018
@DillonSimeone
Body background now responsive
203a88a 
devfake#4 

Sadly, `background-position-y: ...` won't perfectly fix the gap at the bottom without making a new gap on the top due to the .png being what it is.

bg.png could be swapped out for a better image like the one linked below instead, so there's no gaps at all on the bottom of the .png. 

(Found by googling "book collage covers file:.png", with the Licensed For Reuse tool option enabled) 
https://upload.wikimedia.org/wikipedia/commons/6/67/Images_used_on_D%C3%A9couvertes_Gallimard_book_covers.jpg

It might be a cooler idea to have a div behind the contents that's set to 100vh and 100vw, with <img> tags of .png book covers in the div so you can randomize the bookcovers in the div, and have a finer control over how the books are displayed, like padding, margins, etc. 

Folder of bookcover .pngs named like "1.png", "2.png", etc, and have a tiny JavaScript script that randomly selects x numbers between 1 and <amount of bookcovers> then add those to the background div.
@DillonSimeone DillonSimeone mentioned this issue Oct 2, 2018
Closed
@g-elwell g-elwell mentioned this issue Oct 12, 2018
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
good first issue Good for newcomers
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@devfake @jacobherrington @alexweininger