Need help inserting a background image within a

Question

So currently, my website's front page has 9 interactive boxes that change color when hovered over. What I want to do is put background images into each of these boxes (and hopefully each image can scale to the size of the box). Ultimately, I want these images to also fade/brighten upon interaction or mouse over. Here is my website: http://thefloodplains.com/

Here's some of my CSS code:

.col-md-4 {
    color:#00A5D1;
    height:300px;
    border: 1px solid #FF8B6F;
}
.col-md-4:hover{
    background-color: #FFE097;
}
.col-md-4 h3 {
    position: relative;
    top: 40%;
    transform: translateY(-50%);
}

/* Basic Structure
-------------------------------------------------------------- */

h3 {
    font-size:14px;
    text-align:center;
    font-family: 'Buernard', Garamond, "Buenard", "EB Garamond",'EB Garamond';
}

And here's the front page's HTML:

<style>
    h3 {
        font-size:36px;
        font-style: bold;
        text-align:center;
        font-family:'Buernard', Garamond, "Buenard", "EB Garamond",'EB Garamond';
    }     
    .1 {
            background-image: url('');
            max-width: 100%;
            max-height: 100%;
    }
    .2 {
            background-image: url('');
            max-width: 100%;
            max-height: 100%;
    }
    .3 {
            background-image: url('../images/divbg.png');
            max-width: 100%;
            max-height: 100%;
    }
    .4 {
            background-image: url('Birds%20on%20Wire.jpg');
            max-width: 100%;
            max-height: 100%;
    }
    .5 {
            background-image: url('Shark Cans Logo.jpg');
            max-width: 100%;
            max-height: 100%;
    }
    .6 {
            background-image: url('Ocean%20Water.jpg');
            max-width: 100%;
            max-height: 100%;
    }
    .7 {
            background-image: url('Piano.jpg');
            max-width: 100%;
            max-height: 100%;
    }
    .8 {
            background-image: url('../images/divbg.png');
            max-width: 100%;
            max-height: 100%;
    }
    .9 {
            background-image: url('../images/divbg.png');
            max-width: 100%;
            max-height: 100%;
    }
    </style>    
    </head>
    <body>
        <div class="container">
            <div class="row">
                <a href="About.html" title="About the site and Author"><div class="col-md-4">
                    <h3>About</h3>
                    </div></a>
                <a href="Articles.html" title="Original Articles and Content"><div class="col-md-4">
                    <h3>Articles</h3>
                </div>
                <a href="Coding Corner.html" title="Coding Corner - Code for a Variety of Projects"><div class="col-md-4">
                    <h3>Coding Corner</h3>
                </div></a>
            </div>
            <div class="row">
                <a href="Contact - Social.html" title="Contact The Floodplains & The FloodShark"><div class="col-md-4 4">
                    <h3>Contact & Social</h3>
                </div></a>
                <a href="The FloodShark Main.html" title="The FloodShark Music and Media"><div class="col-md-4 5">
                    <h3>
                    The FloodShark
                    Music
                    </h3>
                </div></a>
                <a href="Floodplain Productions.html" title="Floodplain Productions - virtual record label"><div class="col-md-4 6">
                    <h3>Floodplain Productions</h3>
                </div></a>
            </div>  
            <div class="row">   
                <a href="Classical Corner.html" title="Classical Corner - A nook dedicated to sharing and categorizing classical music"><div class="col-md-4">
                    <h3>Classical Corner</h3>
                </div></a>
                <a href="Gallery.html" title="Images, Photographs, and Album Art"><div class="col-md-4">
                    <h3>Gallery</h3>
                </div></a>
                <a href="Contribute - Support - Donate.html" title="Contribute to The Floodplains!"><div class="col-md-4">
                    <h3>Contribute / Support</h3>
                </div></a>
            </div>  
        </div>  
    </body>
</html>

As you can probably see, I've gone ahead and tried to give a background (WIP) image to be within each of the 9 boxes' DIV elements (as indicated by .1, .2, .3, etc...). Unfortunately, upon testing my code, nothing's changed. I feel like I'm dancing around the solution.

As an added caveat, I want the selected images to automatically scale to the size of the boxes - I'm not quite sure how hard this is to do, but I'd love any advice on how to get this to happen.

Any and all advice would be deeply appreciated. Have a wonderful day and night :)

CSS selectors can not start with a digit. Your class names are invalid, so your styles are not being applied. — Bricky, Feb 06 '18 at 00:51

score 0 · Answer 1 · answered Feb 06 '18 at 00:48

0

Making background images cover their container is this:

div {
  background-image:url(../images/please-dont-use-spaces.jpg); //add the background image
  background-position: center center; //center the image in the div
  background-size: cover; //cover the entire div
}

Also consider something like this instead of adding a whole bunch of classes you probably don't need:

.block {
  width: 100%;
  height: 100%;
}

.block:nth-of-type(1){
  background-image:url(./images/background1.jpg);
}

.block:nth-of-type(2){
  background-image:url(./images/background2.jpg);
}

/* etc */

answered Feb 06 '18 at 00:48

Andrew Vickerman

1

thanks for the response! I've tried using bits of the code you suggested, but right now the background image exists, but not scaled down to the size of the div (which is a square, essentially). How can I get the image to scale to the size of the div so that you can still see the full image (just not in its original size)? – wbhyatt Feb 07 '18 at 06:13
For your second part? How would I go about referencing this in the html? Like I have 9 divs right now, each with 2 classes. But if I were to use your method, how would I go ahead and reference each image? Something like
etc?
– wbhyatt Feb 07 '18 at 06:22
You are missing: "background-size:cover;" And for the second part- you don't need to reference it in the HTML which is what makes it good. Your class should just be "block" and the .block:nth-of-type(N) { } will style the Nth .block. – Andrew Vickerman Feb 08 '18 at 00:41
thank you very much. excellent advice and responses and everything appears to be working! – wbhyatt Feb 09 '18 at 02:09

Need help inserting a background image within a

1 Answers1