Trying to retrieve the other half of an image using background position

HTML & CSS
1

Will I be able to retrieve the other half of the image using background position, or would that be practically impossible?

 .jacketc .wrape {
  background-position: 0 -168px;
}

.jacketc {
  position: relative;
  width: 266px;
  height: 174px;
  background: #000000;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/92kMrMf.jpg") no-repeat;
}
2

Asking you to provide adequate information to solve problems is practically impossible. Retrieving an image is not.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>bgimage-position</title>
<!--
https://www.sitepoint.com/community/t/trying-to-retrieve-the-other-half-of-a-removed-javascript-image-using-background-position/309153
-->
    <style>
.jacketc {
  position: relative;
  width: 266px;
  height: 174px;
  background: #000000;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/92kMrMf.jpg") no-repeat;
  background-position: 0 -168px;
}
.jacketc:hover {
  background-position: 0 0;
}
    </style>
</head>
<body>

<div class="jacketc"></div>

</body>
</html>
3

It’s not impossible. The problem is that .wrape does not have a bg image as of yet so the bg position is pointless in that case.

Now when JS removes the .hide class from .wrape that would show a bg image if it were on .wrape

You can set the same bg image from .jacketc on .wrape and it will show when you open .jacketc

.wrape {
  position: relative;
  width: 266px;
  height: 174px;
  background: url("https://i.imgur.com/92kMrMf.jpg") no-repeat;
  background-position: 0 -168px;
}
1 Like
4

When you click on it the other image should appear.

5

I knew about that way, I was referring to without having to put the link in again.

Because the javascript removes it.

6

It worked fine for me with a live edit to your fiddle.

Here’s what you have now

I changed all of this…

.wrape {
  position: relative;
  width: 266px;
  height: 174px;
}

 .jacketc .wrape {
  background-position: 0 -168px;
}

To this…

.wrape {
  position: relative;
  width: 266px;
  height: 174px;
  background: url("https://i.imgur.com/92kMrMf.jpg") no-repeat;
  background-position: 0 -168px;
}

Re-read my first reply again, .wrape never had a bg image on it. You have to give it a bg image and that requires a url

7

Try this:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>bgimage-position</title>
<!--
https://www.sitepoint.com/community/t/trying-to-retrieve-the-other-half-of-a-removed-javascript-image-using-background-position/309153
-->
    <style>
.jacketc {
  position: relative;
  width: 266px;
  height: 174px;
  background: #000000;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/92kMrMf.jpg") no-repeat;
  background-position: 0 -168px;
}
.jacketc.wrape {
  background-position: 0 0;
}
    </style>
</head>
<body>

<div class="jacketc wrape"></div>

</body>
</html>

Toggle the class “wrape” to change images.

8

Yes, I understand that.

I was trying to utilize this even though it was removed.


.jacketc {
  background: url("https://i.imgur.com/92kMrMf.jpg") no-repeat;
}

  background-position: 0 -168px;
}
9

That didn’t do anything:

What was that supposed to do?

10

Ron, in the fiddle jacketc is the main page wrapper
wrape is a child div nested within

They are not the same element

1 Like
11

So asasass is trying to toggle an image in an element to which it is not assigned? :shrug:

@asasass, The images have to be assigned to the box where they are displayed. Since they are background images, you are not downloading another image, you are merely addressing it again.

Change the class names assigned in my code to whatever you need or use Ray’s code. The principle remains the same.

PS: When someone sends you a working page, test the working page before stating that it doesn’t do anything.

12

It’s because I have the javascript set up in a way that removes the first screen so it can’t be accessed again.

document.querySelector(".jacketc").addEventListener("click", function() {
  document.querySelector(".wrape").classList.remove("hide");
});
13

In order for all the JS to continue working correctly you need to keep your html set up the same and use my .wrape edits

2 Likes
14

This is just a different way I set it up from what it was before.

I’ve been working on this thing:

There’s still more stuff I want to do to it.

15

As Ron pointed out, that bg image was already downloaded by the browser. You are just reassigning it to the .wrape div when the jacket gets removed.

In order to reassign it you have to tell it to do that.

16

This one works like this:

.wrape.active,
.wrape .cover {
  background: url("https://i.imgur.com/CzqEXBq.jpg") no-repeat 0 0;
}


.wrape.active {
  background-position: 0 -168px;
}
17

Yes that’s called grouping styles and you can do the same with this code too.
Group the styles that are shared, position, dimensions, bg-imge


.jacketc, .wrape {
  position: relative;
  width: 266px;
  height: 174px;
  background: url("https://i.imgur.com/92kMrMf.jpg") no-repeat;
}
.jacketc {
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}
.wrape {
  background-position: 0 -168px;
}

That is less code and it does the same thing. But the same bg-image is still being applied to two different divs.

1 Like
18

So it can be done. Thanks.

I couldn’t figure that out.

19

Does it need all this stuff with it?

  position: relative;
  width: 266px;
  height: 174px;

Can it stay like this?

.jacketc,
.wrape {
  background: url("https://i.imgur.com/92kMrMf.jpg") no-repeat;
}

.wrape {
  position: relative;
  width: 266px;
  height: 174px;
  background-position: 0 -168px;
}
20

Yes, Like I said, I grouped the styles they both shared. No sense in declaring the dimensions and relative positioning twice. Grab all common styles in one fell swoop.

1 Like