CODEWITHSUNDEEP
htmlcss
byCoder
byCoder

Reputation: 9184

CSS: two background images with position on one element

In my css file i have one rule: two add two background images before and after text element. Before i used two images and all was ok. But now i use sprites: so i need to get area of big image and post it to element (background-position) but i have one trouble: if i set background position: i could not stuck to it position like left center and right center:

background: url(../images/png/elements.png) no-repeat -5px -152px, url(../images/png/elements.png) no-repeat -5px -104px;

how could i float first part to left and second to right of the element?

before was:

background: url(../images/png/mail.png) no-repeat left center, url(../images/png/edit.png) no-repeat right center;

is it real to do?

also: i use it with :hover

Upvotes: 4

Views: 842

Answers (4)

Roy Dela Torre
Roy Dela Torre

Reputation: 1

section.homepage.customer {
    background-image: url('/assets/img/homepage/top-left.png'), url('/assets/img/homepage/bottom-right.png');
    background-position: top left, bottom right;
    background-repeat: no-repeat;
    background-size: 672px;
}

Upvotes: -1

gmo
gmo

Reputation: 9020

Don't use Shorthand for this (especially in the position property):
try with something like:

div {
    width: 100%;
    height: 190px;
    border: 1px solid red;
    background: url(http://alt-web.com/Images/CSSSprite.jpg), url(http://alt-web.com/Images/CSSSprite.jpg);
    background-position: left top, right bottom;
    background-repeat: no-repeat;
}
<div></div>

Edit: Example with pixels, zero and %.

div {
    width: 100%;
    height: 190px;
    border: 1px solid red;
    background-image: url(http://alt-web.com/Images/CSSSprite.jpg), url(http://alt-web.com/Images/CSSSprite.jpg);
    background-position: 0 0, 100% -1215px;
    background-repeat: no-repeat;
}
<div></div>

Upvotes: 1

JNF
JNF

Reputation: 3730

The left and right you are using belong to background-position. The pixel definitions are overriding them.

You should separate the images to two different elements.

Upvotes: 1

Hashem Qolami
Hashem Qolami

Reputation: 99564

I'm afraid that it is not possible to limit the visible area of sprite images unless the size of the element itself is limited.

However, perhaps you could assign the background images to ::before and ::after pseudo-elements which are positioned to the left/right side of the parent box properly (either by float or absolute positioning).

So that you could handle the position of each icon interdependently.

For instance:

.box:before, .box:after {
  content: "";
  display: inline-block; /* or position these elements by floats, etc. */
  width: 48px;           /* for instance */
  height: 48px;          /* for instance */
 }

.box:before {
  background: url(../images/png/elements.png) no-repeat -5px -152px;
}

.box:after {
  background: url(../images/png/elements.png) no-repeat -5px -104px;
}

<div class="box"></div>

Upvotes: 2

Related Questions