The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Managing sprite background image and its container, @media-query
Dag
post Jul 2 2024, 09:16 AM
Post #1


Advanced Member
****

Group: Members
Posts: 122
Joined: 24-October 06
Member No.: 549
I am completely stacked! I can't find the way to manage those image in media-query. Recommended size for this is Width: 268, Height: 382 (or whatever). Bg-image in div z1 should be the same as in the div z2.

I couldn't even kill some crazy div padding all around...

Page is here: https://www.laban.rs/r/sprrite_problem

I've made it on the very shameful way which is against all my HTML principles. Any guru here (still)? Pandy, Christian… that Spanish guy or girl?..

Thanks in advance for analyzing this attitude...

IPB Image IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jul 2 2024, 02:40 PM
Post #2


Programming Fanatic
********

Group: Members
Posts: 2,013
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
The parent div of the 1st image has a class of 'Z1'. The parent div of the 2nd image has a class of 'Z2'. Does changing the class name of the 1st parent div to 'Z2' fix your problem?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dag
post Jul 2 2024, 03:19 PM
Post #3


Advanced Member
****

Group: Members
Posts: 122
Joined: 24-October 06
Member No.: 549
QUOTE(CharlesEF @ Jul 2 2024, 11:40 PM) *

The parent div of the 1st image has a class of 'Z1'. The parent div of the 2nd image has a class of 'Z2'. Does changing the class name of the 1st parent div to 'Z2' fix your problem?


Sure it does Charles! But that's not the point. Style as
CODE

.z2 span {
    margin: 0 0 0 -4.94rem;
    top: -2.75rem;
    transform:scale(0.6);
}

is awful! And I want to find real, not hucky solution. Without negative values (rem, px, vw, %...) Or you don't think that it is awful enough?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jul 2 2024, 03:33 PM
Post #4


Programming Fanatic
********

Group: Members
Posts: 2,013
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
Well then, I guess I've miss understood the problem.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Jul 2 2024, 06:42 PM
Post #5


Serious Coder
*****

Group: Members
Posts: 257
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743
Hi there Dag,

I am not really sure what you intentions are but I
have made an example that will display the images
at various sizes and it will also work OK on mobile
devices.

index.html
CODE

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

</head>
<body>

<h1>Page Description</h1>

<h2>‘Who controls the past controls the future…</h2>
<div class="container">
  <span></span>  
</div>
<h2>who controls the present controls the past.’</h2>

<h2>‘Who controls the past controls the future…</h2>
<div class="container">
  <span></span>    
</div>
<h2>who controls the present controls the past.’</h2>

<h2>‘Who controls the past controls the future…</h2>
  <div class="container">
  <span></span>    
</div>
  <h2>who controls the present controls the past.’</h2>

</body>
</html>

screen.css
CODE

*{
   box-sizing: border-box;
}
body {
   background-color: #f9f9f9;
   font: normal 1em / 1.5  arial, helvetica, sans-serif;
}
h1,h2 {
   font-size: 1.25em;
   font-weight: normal;
   color: #555;
   text-align: center;
}
h2 {
   font-size: 1em;
   font-style: italic;
}
h2:nth-of-type(even) {
    text-align: left;  
}
.container {
   background-color: #cfc;
   padding: 1em;
   border: 1px solid #080;
}
.container span{
   display: block;
   width: 16em;
   height: 9.6em;
   border: 1px solid #000;
   background-image:url(https://www.laban.rs/r/r/img/csp-dsc.webp);
   background-size: 96em; /* 6 times the width */
   background-position: -32em;
}
.container:nth-of-type(2) span {
   width: 20em;
   height: 12em;
   background-size: 120em; /* 6 times the width */
   background-position: 0;
}
.container:nth-of-type(3) span {
   width:24em;
   height:14.4em;
   background-size: 144em; /* 6 times the width */
   background-position: -72em;
}
@media ( max-width: 27em ){
.container {
   padding: 0.5em;
}
.container:nth-of-type(2) span {
   width: 16em;
   height: 9.6em;
   background-size: 96em;
}
.container:nth-of-type(3) span {
   width: 16em;
   height: 9.6em;
   background-size: 96em;
   background-position: -48em;
}
}

You may also view it here...

Full Page View
https://codepen.io/coothead/full/abreGLQ

Editor View
https://codepen.io/coothead/pen/abreGLQ


coothead

This post has been edited by coothead: Jul 2 2024, 06:52 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dag
post Jul 2 2024, 10:52 PM
Post #6


Advanced Member
****

Group: Members
Posts: 122
Joined: 24-October 06
Member No.: 549
QUOTE(coothead @ Jul 3 2024, 03:42 AM) *

I am not really sure what you intentions are but I
have made an example that will display the images
at various sizes and it will also work OK on mobile
devices.


Thanks coothead.

Actualy, I just want to push one container (span) to behave normaly in another container (div).

I saw that you worked on it. I need some time. Thank you very much of course! I'll let you.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dag
post Jul 3 2024, 01:58 AM
Post #7


Advanced Member
****

Group: Members
Posts: 122
Joined: 24-October 06
Member No.: 549
QUOTE(coothead @ Jul 3 2024, 03:42 AM) *

I have made an example that will display the images
at various sizes and it will also work OK on mobile
devices.


Hi coothead!

I thought that I can edit my previous post but it is not possible seems...

Well, thank you again for few very usefull hints. And for your time.
a) You added few basic styles to your code and I realize that I have to do the same. Many styling before has impact to final solution.
b) You used negative margins too. Exatly that is what I am trying to avoid!

Span with background is understood as empty span. So, to manage empty container, you need to give to it exact width and height (auto will not works). Everything in media queries is not real center - just simulation and that is weird. With exact width, center not works. I didn't try max-width but it has probably the same attitude.

My code (page https://www.laban.rs/r/b):
CODE

.z3, .z4 {
    margin: 0 auto;
    padding: 4px;
    width: 26rem;
    height: 15.65rem;
    text-align: center;
}
.z3 span, .z4 span {
    display: block;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    transform-origin: 4% 4%;
}

That is for base desktop resolution. Now, in medi queries you are just addapting all with few lines:
CODE

.z3, .z4 {
    width: 23.25rem;
    height: 14.2rem;
}
.z3 span, .z4 span {
    transform:scale(0.9);
}
/*-- max-width:378px --*/
main{margin:0 1%;}
.z3, .z4 {
    width: 20.25rem;
    height: 12.4rem;
}
.z3 span, .z4 span {
    transform:scale(0.77);
}

etc.

Transform-origin() (similar to translate()) is usefull here. Moving span with the bg-image. I changed 4% on 2% and than on 1%.

Now it works (well?) without negative margins. Probably some calculation could be made to use clamp() or calc() but it will be not easy part... calc(), as well as vw units are not friendly in media queries (my experience with mobile devices). Results should be very unpreditable. REM is strong unit of measurement!

What do you think about solution in b.html? Simple enough seems to me...

Thanks again,

cheers,
Dag
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 3 2024, 03:25 PM
Post #8


.
********

Group: WDG Moderators
Posts: 9,797
Joined: 10-August 06
Member No.: 7
QUOTE(Dag @ Jul 2 2024, 04:16 PM) *

I am completely stacked! I can't find the way to manage those image in media-query.

Do you want different sizes for the .z1 and .z2 SPAN elements, depending on media queries? And then also change the size of the SPAN's background image? unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dag
post Jul 4 2024, 06:04 AM
Post #9


Advanced Member
****

Group: Members
Posts: 122
Joined: 24-October 06
Member No.: 549
QUOTE(Christian J @ Jul 4 2024, 12:25 AM) *

QUOTE(Dag @ Jul 2 2024, 04:16 PM) *

I am completely stacked! I can't find the way to manage those image in media-query.

Do you want different sizes for the .z1 and .z2 SPAN elements, depending on media queries? And then also change the size of the SPAN's background image? unsure.gif


Yes. Diff. spans or diff. bg-images of course with diff. screen-width sizes... means: need to control size of empty container (span with bg-image) which is inside another container as wrapper.
(
<div class="z"><span class="whatever"></span></div>
)
.whatever has bg-image.

Dag
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 4 2024, 11:20 AM
Post #10


.
********

Group: WDG Moderators
Posts: 9,797
Joined: 10-August 06
Member No.: 7
Does this help? unsure.gif

CSS:
CODE

span {
display: inline-block;
border: solid;
background: pink url(dog.jpg);
background-size: 100%; /* Adapts the background-image to the width and height of the SPAN. */

width: 200px;
height: 100px;
background-position: 100px 0;
}

@media only screen and (max-width: 700px)
{
    span {
    width: 150px;
    height: 75px;
    background-position: 75px 0;
    }
}


HTML:
CODE
<span></span>


Change the SPAN's width and height for each different media query. Also the first (x-axis) value of the sprite image's background-position's needs to be customized in each media query, since the width of the entire sprite changes with the SPAN.

(Can't help with transform() properties and similar, never tried that myself.)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dag
post Jul 4 2024, 12:54 PM
Post #11


Advanced Member
****

Group: Members
Posts: 122
Joined: 24-October 06
Member No.: 549
QUOTE(Christian J @ Jul 4 2024, 08:20 PM) *

Does this help? unsure.gif

CSS:
CODE

span {
display: inline-block;
border: solid;
background: pink url(dog.jpg);
background-size: 100%; /* Adapts the background-image to the width and height of the SPAN. */

width: 200px;
height: 100px;
background-position: 100px 0;
}

@media only screen and (max-width: 700px)
{
    span {
    width: 150px;
    height: 75px;
    background-position: 75px 0;
    }
}


HTML:
CODE
<span></span>


Change the SPAN's width and height for each different media query. Also the first (x-axis) value of the sprite image's background-position's needs to be customized in each media query, since the width of the entire sprite changes with the SPAN.

(Can't help with transform() properties and similar, never tried that myself.)


Thanks Christian.

But "Change the SPAN's width and height for each different media query" can't be done because it has already fixed bg-sizes. It is sprite bg-image https://www.laban.rs/r/r/img/csp-dsc.webp. And you CAN change the sizes of DIV wrapper container. So, I think that problem is solved.

Transform: scale() is legal solution. Should be sometimes used together with transform-origin (positioning).

Two problems were here:
1. Emptu SPAN container and
2. Sprite bg-image.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 4 2024, 01:09 PM
Post #12


.
********

Group: WDG Moderators
Posts: 9,797
Joined: 10-August 06
Member No.: 7
QUOTE(Dag @ Jul 4 2024, 07:54 PM) *

"Change the SPAN's width and height for each different media query" can't be done because it has already fixed bg-sizes.

The sprite image changes size to the SPAN, thanks to this:

CODE
background-size: 100%;

Or did you mean there is another background image, in addition to the sprite?

QUOTE
And you CAN change the sizes of DIV wrapper container. So, I think that problem is solved.

Yeah I don't think it matters which element you give width and height, as long as the sprite image can be resized to fit that element.

QUOTE
Two problems were here:
1. Emptu SPAN container and

You mean from an accessibility point of view? That's the problem with background sprites. Maybe it's possible to use a sprite inside an IMG element instead, maybe by clipping the image in various ways?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 4 2024, 02:11 PM
Post #13


.
********

Group: WDG Moderators
Posts: 9,797
Joined: 10-August 06
Member No.: 7
Now I noticed my "background-size" mistake with the sprite image, sorry!

Here's an attempt with three sprite sections (z1, z2 and z6), in two media query sizes.

CODE
span {
display: inline-block;
border: solid;
background: pink url('https://www.laban.rs/r/r/img/csp-dsc.webp');
background-size: auto 100%;

width: 398px;
height: 240px;
}

/* First (left-most) sprite section. */
span.z1 {background-position: left top;}

/* Second sprite section.  */
span.z2 {background-position: -398px top; }

/* Sixth (right-most) sprite section.  */
span.z6 {background-position: -1990px top; }

@media only screen and (max-width: 700px)
{
    span {
    width: 199px;
    height: 120px;
    }

    /* First (left-most) sprite section. */
    span.z1 {background-position: left top;}

    /* Second sprite section. */
    span.z2 {background-position: -199px top;}

    /* Sixth (right-most) sprite section. */
    span.z6 {background-position: -995px top;}
}


CODE
<p><span class="z1"></span></p>

<p><span class="z2"></span></p>

<p><span class="z6"></span></p>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 4 2024, 05:14 PM
Post #14


.
********

Group: WDG Moderators
Posts: 9,797
Joined: 10-August 06
Member No.: 7
Here's a variant with the width and height applied to the container P elements:

CODE
p {
width: 398px;
height: 240px;
border: solid blue;
}

span {
display: inline-block;
width: 100%;
height: 100%;
background: pink url('https://www.laban.rs/r/r/img/csp-dsc.webp');
background-size: auto 100%;
}

.z1 span {background-position: left top;}

.z2 span {background-position: -398px top;}

.z6 span {background-position: -1990px top;}

@media only screen and (max-width: 700px)
{
    p {
    width: 199px;
    height: 120px;
    }

    .z1 span {background-position: left top;}

    .z2 span {background-position: -199px top;}

    .z6 span {background-position: -995px top;}
}



CODE
<p class="z1"><span></span></p>

<p class="z2"><span></span></p>

<p class="z6"><span></span></p>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dag
post Jul 5 2024, 03:50 AM
Post #15


Advanced Member
****

Group: Members
Posts: 122
Joined: 24-October 06
Member No.: 549
QUOTE(Christian J @ Jul 5 2024, 02:14 AM) *

Here's a variant with the width and height applied to the container P elements:

CODE
p {
width: 398px;
height: 240px;
border: solid blue;
}

span {
display: inline-block;
width: 100%;
height: 100%;
background: pink url('https://www.laban.rs/r/r/img/csp-dsc.webp');
background-size: auto 100%;
}

.z1 span {background-position: left top;}

.z2 span {background-position: -398px top;}

.z6 span {background-position: -1990px top;}

@media only screen and (max-width: 700px)
{
    p {
    width: 199px;
    height: 120px;
    }

    .z1 span {background-position: left top;}

    .z2 span {background-position: -199px top;}

    .z6 span {background-position: -995px top;}
}



CODE
<p class="z1"><span></span></p>

<p class="z2"><span></span></p>

<p class="z6"><span></span></p>



OK. I tried it, that is approx. the same. Instead of P, I have DIV.
Role of the z is not bg-image but the order inside grid: one time left, one time right. In narrow screens (grid --> block): each one is after the text.
CODE

.a .z {
    grid-column: 1;
    order: 1;
}
.b .z {
    grid-column: 2;
    order: 2;
}


Each span has its own class for bg-sprite-image. My final solution looks good for me: Dimension must be determined but no negative margins or paddings. Transform do the trick. You take 5 minutes and read about it. New for me too...
CODE

.z {
    width: 26rem;
    height: 15.65rem;
}
.z span {
    transform-scale: (whatever);
    transform-origin: 4% 4%; /* or 2% 2% etc... */
}

Here is th link of real usage:
https://www.laban.rs/r/r/aa

Thanks again.

Dag
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 12th May 2025 - 07:23 PM
Invision Power Board © 2025  IPS, Inc.
Licensed to: HTMLHelp.com, LLC