Reusing my DIV

[Gussy81]

Hi,

I have a div that has some styles - the most important is the background image. Its working as i would like to to on my homepage. I want to re-use the div on my about us page with out copying the div attributes but giving it a different name. Can i re-use the below div with a different background image?

#header { /*Placement of image for header background */
    position: relative;
    background-image: url("../../images/header.jpg");
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    text-align: center;
    padding: 7.5em 0 2em 0;
    cursor: default;
    color: #F4EDEA;
    font-family: Helvetica, Sans-Serif;
    font-style: normal;
    line-height: 12px;
    font-weight:400;
    font-size: 12px;  
}

<!-- Header -->
<div id="header">

    <!-- Inner -->
    <div class="inner">
        <header>
            <p>THE OFFICE OF</p><BR>
            <h1><a href="index.html" id="logo">LICITORS</a></h1>
            <BR><!-- <hr /> -->
            <p>THE EXPERTS</p>
        </header>
        <footer>
            footer here
        </footer>
    </div>

 

[Johna]

By reuse, you mean use the same styles on 2 different pages? Then you can import the same stylesheet into the about us page, give the div in the about us page a different class/id and give that class/id a different background image.

Here's an example (assuming you give the div about as it's id):

/* Import this stylesheet in both the homepage and about us page */

#header,
#about {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    text-align: center;
    padding: 7.5em 0 2em 0;
    cursor: default;
    color: #F4EDEA;
    font-family: Helvetica, Sans-Serif;
    font-style: normal;
    line-height: 12px;
    font-weight:400;
    font-size: 12px;  
}

#header {
    background-image: url("../../images/header.jpg");
}

#about {
    background-image: url("../../images/about.jpg");
}

If you mean reuse, as in reuse that same element/component so you dont have to type it in on each page you want to use it, then React might be what you're looking for.

 

[Gussy81]

By reuse, you mean use the same styles on 2 different pages? Then you can import the same stylesheet into the about us page, give the div in the about us page a different class/id and give that class/id a different background image.

Here's an example (assuming you give the div about as it's id):

/* Import this stylesheet in both the homepage and about us page */

#header,
#about {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    text-align: center;
    padding: 7.5em 0 2em 0;
    cursor: default;
    color: #F4EDEA;
    font-family: Helvetica, Sans-Serif;
    font-style: normal;
    line-height: 12px;
    font-weight:400;
    font-size: 12px; 
}

#header {
    background-image: url("../../images/header.jpg");
}

#about {
    background-image: url("../../images/about.jpg");
}

If you mean reuse, as in reuse that same element/component so you dont have to type it in on each page you want to use it, then React might be what you're looking for.

Spot on. Nice and simple. Thank you