CODEWITHSUNDEEP
htmlcssbackground-image
DunderMifflin11
DunderMifflin11

Reputation: 29

How can I add different background-image URLs to one class?

I have these boxes, .partyboxFlag which is a class as they have everything the same, in terms of resolution, etc. However, I want each one that is create in the HTML markup to have a different URL.

<html>

<head>
    <title>Learn which parties are doing what</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>

        <div id = "header">

            <div id = "logo"></div>

        </div>

        <div id = "navbar">
                <ul>
                    <li><a href="index.html">Major Parties</a></li>
                    <li><a href="minor.html">Minor Parties</a></li>
                    <li><a href="whyvote.html">Why Vote</a></li>
                    <li><a href="about.html">About Us</a></li>
                </ul>
        </div>

    <div id = "wrapper">

        <div class = "topbox">

            <h1>The Conservative Party</h1>

            <div id = "listBox">
                <h2>Plan</h2>
                <p>The Conservatives have a long-term economic plan, which they intend to use to build a stronger, healthier economy.</p>
                <h2>Policies</h2>
                <ul>
                    <li>Reducing the Deficit</li>
                    <li>Cutting income tax and freezing fuel duty</li>
                    <li>Creating more jobs</li>
                    <li>Capping welfare and working to control immigration</li>
                    <li>Delivering the best schools and skills for young people</li>
                </ul>
            </div>

            <div id = "topboxFlag"></div>

            </div>

        <div class = "partybox">

            <h1>The Labour Party</h1>

            <div class = "partyboxFlag"></div>

        </div>

        <div class = "partybox">

            <h1>The Liberal Democrats</h1>

            <div class = "partyboxFlag"></div>

        </div>

        <div class = "partybox">

            <h1>The UK Independence Party</h1>

            <div class = "partyboxFlag"></div>

        </div>

        <div class = "partybox">

            <h1>The Green Party</h1>

            <div class = "partyboxFlag"></div>

        </div>

        <div class = "partybox">

            <h1>The Scottish National Party</h1>

            <div class = "partyboxFlag"></div>

        </div>

    </div>



</body>

</html>

From the above code, I want each of these sections to have different images.

<div class = "partybox">

                <h1>The Liberal Democrats</h1>

                <div class = "partyboxFlag"></div>

            </div>

            <div class = "partybox">

                <h1>The UK Independence Party</h1>

                <div class = "partyboxFlag"></div>

            </div>

body
{
    background-color: #C6E0F5;
}

#wrapper
{
    position: relative;
    margin: auto;
    width: 100%;
    height: 2900px;
    max-width: 1000px;
    background-color: #C6E0F5;
}

#header
{
    position: relative;
    width: 100%;
    height: 170px;
    background-color: #00247D;
}

#navbar 
{
  position: relative;
  width: auto;
  bottom: 20px;
  height: 35px;
  text-align: center; 
  background-color: #CF142B;
}
  #navbar ul li 
{
    list-style-type: none;
    padding: 20px;
    text-align: center;
    font-family: "Trebuchet MS";
    font-size: 25px;
    display: inline; 
}
  #navbar ul li a 
{
    text-decoration: none;
    font-weight: bold;
    color: #fff; 
}

.topbox
{
    height: 400px;
    width: 100%;
    margin: auto;
    background-color: #00247D;
}

.topbox h1
{
    font-size: 35px;
    font-family: "Trebuchet MS";
    text-align: center;
    color: #fff;
    width: 500px;
    background-color: #CF142B;
    margin:0;
    float: left;
}

.topbox #topboxFlag
{
    float: right;
    width: 300px;
    height: 400px;
    background-image: url(../img/conservativesflag.png);

}

.topbox #listBox
{
    position: absolute;
    top: 30px;
    left: 10px;
    float: left;
    width: 500px;
    height: 300px;

}

.topbox #listbox ul li
{
    font-size: 18px;
    font-family: "Trebuchet MS";
    color: #fff;
}

.topbox #listbox h2
{
    font-size: 20px;
    font-family: "Trebuchet MS";
    color: #fff;
}

.topbox #listbox p
{
    font-size: 18px;
    font-family: "Trebuchet MS";
    color: #fff;
}


.partybox
{
    height: 400px;
    width: 100%;
    margin: auto;
    background-color: #00247D;
    margin-top: 15px;
}

.partybox h1
{
    font-size: 35px;
    font-family: "Trebuchet MS";
    text-align: center;
    color: #fff;
    width: 500px;
    background-color: #CF142B;
    margin:0;
    float: left;
}

.partybox .partyboxFlag
{
    float: right;
    width: 300px;
    height: 400px;
    background-color: #fff;
}

Upvotes: 0

Views: 101

Answers (3)

Schybo
Schybo

Reputation: 1663

I was already working on this before Nick's answer, and since it's more pertinent to your code (I used your markup) I thought I'd still post it.

The fiddle can be found here

Basically you would target them as:

.partybox:nth-child(2) .partyboxFlag {
    background-image: url(http://topnews.in/files/uk_flag_0.jpg);
}

.partybox:nth-child(3) .partyboxFlag {
    background-image: url(http://www.markpack.org.uk/files/2011/12/Lib-Dem-logo.jpg);
}

.partybox:nth-child(4) .partyboxFlag {
    background-image: url(http://madmikesamerica.com/wp-content/uploads/2015/02/ukip-flag.jpg);
}

.partybox:nth-child(5) .partyboxFlag {
    background-image: url(https://bsnews.info/wp-content/uploads/2013/09/green-party-uk.jpg);
}

.partybox:nth-child(6) .partyboxFlag {
    background-image: url(http://www.exaxe.com/wp-content/uploads/2013/12/Scottish-flag.png);
}

Then you would also keep the original .partybox .partyboxFlag markup as such:

.partybox .partyboxFlag {
    float: right;
    width: 300px;
    height: 400px;
}

Upvotes: 0

Caio Felipe Pereira
Caio Felipe Pereira

Reputation: 835

If I understood your question correctly (which I think I did, but you never know), you want every <div class = "partyboxFlag"></div> to have a different background image, right?

So, to do that, I'd use an ID to dictate this specific URL (you could also use another class, but as your backgrounds seem to be unique, IDs seem the way to go). That said, your markup would be:

<div class ="partyboxFlag" id="labour-party"></div>
<div class ="partyboxFlag" id="liberal-party"></div>
<div class ="partyboxFlag" id="green-party"></div>

And your CSS:

#labour-party{background-image: url('/somefile.jpeg')}
#liberal-party{background-image: url('/someotherfile.jpeg')}
#green-party{background-image: url('/yetanotherfile.jpeg')}

That way, you can play around with your markup, and the flags order will be determined by you. @Nick Delaney's solution works, but the order the flags appear (I'm assuming the images will be flags) is set by the order the children are displayed in the markup. If you ever wanna put a new flag between the first and the second, there goes your logic. Bearing that in mind, I think it's easier using IDs, as it will give you the ability to maintain your code easily.

Upvotes: 1

Nick Delaney
Nick Delaney

Reputation: 601

You would use the nth-child selector. I've made a jsFiddle to show an example https://jsfiddle.net/pz8skfLx/

.partyboxFlag:nth-child(1){background:#000;}
.partyboxFlag:nth-child(2){background:#ccc;}
.partyboxFlag:nth-child(3){background:#eee;}

Upvotes: 0

Related Questions