I finished my Random (Simpsons) Quote Generator. It took me longer than expected because it took a while to figure out the tweet button. And my code was really messy. So I ended up cleaning it up a bit. Thank goodness for the help forums or I would still be staring at my screen wondering how to pull that last bits together. The background images are bit slow to load because they are dropbox, but otherwise I’m pretty happy with it.
Hey. I saw your other thread and I’m glad you sorted the issues you were having.
As a suggestion, and to make the quote generator look nicer, you could enlarge your body to full height and then have the background-image cover that space, instead of repeating itself, like so:
body{
min-height:100vh; /* Covers the entire viewport */
background-image: url("https://www.dropbox.com/s/7694odmpqb1dt6f/family.jpg?raw=1");
background-size:cover;
background-repeat:no-repeat;
color: #3a9983;
}
And maybe have your quote div’s background-color a little transparent to make the image visible at smaller resolutions:
.box-color{
background-color: rgba(255,255,255,.9);
}
These are just styling options, of course. Aside from that, good job!
1 Like
You know, I tried playing around with the background do exactly what your code does. I couldn’t figured out the right combination to get it to do this. That was why I set the background color at all, hoping that I could somehow set just the image to not repeat, but let the rest of the background be the color of the bg-image. But that didn’t work either. In the end, I left it alone because I needed to move on to writing the javascript. Your code does exactly what I was actually aiming for. So thanks for the suggestion. I’ve added both and it works better.
1 Like
You should be happy with it, you great an amazing job!
One minor concern - maybe add a text-shadow to your footer. It can get caught up in the background when viewed on a smaller screen