CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3095198
user3095198

Reputation: 83

Can I use a part of the background image as a separate div

I think the header covers it all. Can a small let's say 40x40 part of the 1600x1200 background image of an HTML (javascript, jquery) page be used as another div. I mean I take a 40x40 part of the image and set it as a div with id "div1" and so on for another parts. The idea is, that the divs are set to the background image, so that if watched from a smaller screen with the "fit in" function there will be no misplacement. I hope you get the idea.

Best Regards.

Upvotes: 0

Views: 66

Answers (2)

HarmonicApps
HarmonicApps

Reputation: 88

It sounds like you want to use an image as a CSS Image Sprite. You can set a background image on a DIV and then adjust the background-position as needed.

JSFiddle Example

    .big-image {
        background-image:url(http://img2.netcarshow.com/McLaren-F1_1993_1024x768_wallpaper_01.jpg);
        background-repeat:no-repeat;
        display:block;
    }
    .img-sec-1 {
        background-position: -175px -268px;
        height:40px !IMPORTANT;
        width:40px !IMPORTANT;
    }
    .img-sec-2 {
        background-position: -270px -290px;
        height:50px !IMPORTANT;
        width:50px !IMPORTANT;
    }

Upvotes: 1

abc123
abc123

Reputation: 18763

jsFiddle

CSS

html {
    background: url(http://placehold.it/350x150) no-repeat center center fixed;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    background-position: 0px -30px;
    width: 50px;
    height: 30px;
}

Note

This uses the sprite technique and should work fine for this scenario.

References:

Demo pulled from Reference

CSS

.icons {
    display: block;
    width: 40px;
    height: 40px;
    background-image: url(http://www.guistuff.com/css/images/sixicons.png);
    background-repeat: no-repeat;
}
.icon_1 {
    background-position: 0px 0px;
}
.icon_2 {
    background-position: -40px 0px;
}
.icon_3 {
    background-position: -80px 0px;
}
.icon_4 {
    background-position: 0px -40px;
}
.icon_5 {
    background-position: -40px -40px;
}
.icon_6 {
    background-position: -80px -40px;
}

HTML

<span class="icons icon_1" style="float:left;"></span>
&nbsp; - Icon No.1<br/>

<span class="icons icon_2" style="float:left;"></span>
&nbsp; - Icon No.2<br/>

<span class="icons icon_3" style="float:left;"></span>
&nbsp; - Icon No.3<br/>

<span class="icons icon_4" style="float:left;"></span>
&nbsp; - Icon No.4<br/>

<span class="icons icon_5" style="float:left;"></span>
&nbsp; - Icon No.5<br/>

<span class="icons icon_6" style="float:left;"></span>
&nbsp; - Icon No.6<br/>

Upvotes: 1

Related Questions