Combining multiple CSS elements

Question

What would be the best way to combine these CSS elements?

As my web page grows I'm quite concerned about maintenance. There is not much difference between the below, apart from the bg image used, so I was wondering if there could be a way to make the code more maintainable.

#section3 {
    background: url(../img/img2.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    z-index: 1;
}
@media only screen and (min-width: 0px) and (max-width: 768px) {
    #section3 {
        height: 30em; 
    }
}
@media only screen and (min-width: 769px) {
    #section3 {
        height: 50em;
    }
}

#section5 {
    background: url(../img/img3.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    z-index: 1;
}
@media only screen and (min-width: 0px) and (max-width: 768px) {
    #section5 {
        height: 30em; 
    }
}
@media only screen and (min-width: 769px) {
    #section5 {
        height: 50em;
    }
}

#section7 {
    background: url(../img/img4.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    z-index: 1;
}
@media only screen and (min-width: 0px) and (max-width: 768px) {
    #section7 {
        height: 30em; 
    }
}
@media only screen and (min-width: 769px) {
    #section7 {
        height: 50em;
    }
}

Consider using SASS/SCSS, which allows CSS nesting and repeatable functions. — ceejayoz
– ceejayoz, Commented Oct 26, 2014 at 15:10

pbaldauf · Accepted Answer · 2014-10-26 15:08:11Z

2

I would suggest something like this Fiddle.

#section3 {
    background: url(../img/img2.jpg) no-repeat center center;
}

#section5 {
    background: url(../img/img3.jpg) no-repeat center center;
}

#section7 {
    background: url(../img/img4.jpg) no-repeat center center;
}

#section7, #section5, #section3 {
     -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    z-index: 1;
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    #section7, #section5, #section3 {
        height: 30em; 
    }
}
@media only screen and (min-width: 769px) {
    #section7, #section5, #section3 {
        height: 50em;
    }
}

Perhaps you have also a look at LESS or SASS.

answered Oct 26, 2014 at 15:08

pbaldauf

1,6812 gold badges26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Combining multiple CSS elements

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related