CODEWITHSUNDEEP
cssmedia-queries
Anthony
Anthony

Reputation: 658

100% Div with repeating background image media query

I'm having trouble nailing down a solution to this.

I have a div with a repeating background image that's 100% across the screen. So lets say:

.services_wrap {
    width:100%;
    height:200px;
    background:url('../images/services_tile.png') repeat-x;
}

<div class="services_wrap">
    //Content
</div>

How do I specify a media query that will scale that entire div down when the screen is resized, like for a normal div it would be:

@media screen and (max-width: 650px) {

    /*Makes the logo shrink*/
    #header {
            height:auto;
    }
}

But If I try this with .services_wrap nothing happens.

I have tried background-size: properties with no luck.

Is it possible to scale a repeating image?

Upvotes: 1

Views: 428

Answers (1)

bookcasey
bookcasey

Reputation: 40493

Use background-size

div {
    background: url("//www.placehold.it/50x50") repeat-x;
}

@media screen and (max-width: 900px) {
    div {
        background-size: 25px;
    }
}

​ Demo

Upvotes: 1

Related Questions