img position

Unverified

Name

img position

About

adds object-position dynamically

Language

CSS

Rating

Voted: 0 by 0 user(s)

How to Setup Snippet

add data-bg-position as attribute and then pull in the ACF or MB field dynamically.

Codevault

Kampotwebs

Scroll down to see more snippets from this codevault.

Wordpress Compatability

The author has indicated that this snippet is compatable up to wordpress version: Not Specified

Code Snippet Plugin Sync

Free & Pro

Download this snippet by clicking the download button, then head over to the Code Snippet Plugin settings in your wordpress admin dashboard, select the import menu then upload this file to import into your wordpress site.

Pro Only (Coming Soon)

You will be able to click a button and sync this snippet to your wordpress site automatically and from your dashboard manage all code snippets across all your wordpress sites that have the Code Snippets Pro plugin installed.

History

Last modified:

16/09/2022

Important Note

This snippet has the following status:

Unverified

This snippet has not been verified, use with caution and at your own risk. See details provided by author in sidebar and click below to find out more.

Learn More

 
                      1///***
  2CONTROL IMAGE FOCUS
  3 
  4enter
  5data-bg-position
  6as attribute to the section with bg image
  7 
  8***///
  9 
 10[data-bg-position="0 0"] {
 11    object-position: 0% 0%;
 12}
 13 
 14[data-bg-position="10 0"] {
 15    object-position: 10% 0%;
 16}
 17 
 18[data-bg-position="20 0"] {
 19    object-position: 20% 0%;
 20}
 21 
 22[data-bg-position="30 0"] {
 23    object-position: 30% 0%;
 24}
 25 
 26[data-bg-position="40 0"] {
 27    object-position: 40% 0%;
 28}
 29 
 30[data-bg-position="50 0"] {
 31    object-position: 50% 0%;
 32}
 33 
 34[data-bg-position="60 0"] {
 35    object-position: 60% 0%;
 36}
 37 
 38[data-bg-position="70 0"] {
 39    object-position: 70% 0%;
 40}
 41 
 42[data-bg-position="80 0"] {
 43    object-position: 80% 0%;
 44}
 45 
 46[data-bg-position="90 0"] {
 47    object-position: 90% 0%;
 48}
 49 
 50[data-bg-position="100 0"] {
 51    object-position: 100% 0%;
 52}
 53 
 54[data-bg-position="0 10"] {
 55    object-position: 10% 10%;
 56}
 57 
 58[data-bg-position="10 10"] {
 59    object-position: 10% 10%;
 60}
 61 
 62[data-bg-position="20 10"] {
 63    object-position: 20% 10%;
 64}
 65 
 66[data-bg-position="30 10"] {
 67    object-position: 30% 10%;
 68}
 69 
 70[data-bg-position="40 10"] {
 71    object-position: 40% 10%;
 72}
 73 
 74[data-bg-position="50 10"] {
 75    object-position: 50% 10%;
 76}
 77 
 78[data-bg-position="60 10"] {
 79    object-position: 60% 10%;
 80}
 81 
 82[data-bg-position="70 10"] {
 83    object-position: 70% 10%;
 84}
 85 
 86[data-bg-position="80 10"] {
 87    object-position: 80% 10%;
 88}
 89 
 90[data-bg-position="90 10"] {
 91    object-position: 90% 10%;
 92}
 93 
 94[data-bg-position="100 10"] {
 95    object-position: 100% 10%;
 96}
 97 
 98[data-bg-position="0 20"] {
 99    object-position: 0% 20%;
100}
101 
102[data-bg-position="10 20"] {
103    object-position: 10% 20%;
104}
105 
106[data-bg-position="20 20"] {
107    object-position: 20% 20%;
108}
109 
110[data-bg-position="30 20"] {
111    object-position: 30% 20%;
112}
113 
114[data-bg-position="40 20"] {
115    object-position: 40% 20%;
116}
117 
118[data-bg-position="50 20"] {
119    object-position: 50% 20%;
120}
121 
122[data-bg-position="60 20"] {
123    object-position: 60% 20%;
124}
125 
126[data-bg-position="70 20"] {
127    object-position: 70% 20%;
128}
129 
130[data-bg-position="80 20"] {
131    object-position: 80% 20%;
132}
133 
134[data-bg-position="90 20"] {
135    object-position: 90% 20%;
136}
137 
138[data-bg-position="100 20"] {
139    object-position: 100% 20%;
140}
141 
142[data-bg-position="0 30"] {
143    object-position: 0% 30%;
144}
145 
146[data-bg-position="10 30"] {
147    object-position: 10% 30%;
148}
149 
150[data-bg-position="20 30"] {
151    object-position: 20% 30%;
152}
153 
154[data-bg-position="30 30"] {
155    object-position: 30% 30%;
156}
157 
158[data-bg-position="40 30"] {
159    object-position: 40% 30%;
160}
161 
162[data-bg-position="50 30"] {
163    object-position: 50% 30%;
164}
165 
166[data-bg-position="60 30"] {
167    object-position: 60% 30%;
168}
169 
170[data-bg-position="70 30"] {
171    object-position: 70% 30%;
172}
173 
174[data-bg-position="80 30"] {
175    object-position: 80% 30%;
176}
177 
178[data-bg-position="90 30"] {
179    object-position: 90% 30%;
180}
181 
182[data-bg-position="100 30"] {
183    object-position: 100% 30%;
184}
185 
186[data-bg-position="0 40"] {
187    object-position: 0% 40%;
188}
189 
190[data-bg-position="10 40"] {
191    object-position: 10% 40%;
192}
193 
194[data-bg-position="20 40"] {
195    object-position: 20% 40%;
196}
197 
198[data-bg-position="30 40"] {
199    object-position: 30% 40%;
200}
201 
202[data-bg-position="40 40"] {
203    object-position: 40% 40%;
204}
205 
206[data-bg-position="50 40"] {
207    object-position: 50% 40%;
208}
209 
210[data-bg-position="60 40"] {
211    object-position: 60% 40%;
212}
213 
214[data-bg-position="70 40"] {
215    object-position: 70% 40%;
216}
217 
218[data-bg-position="80 40"] {
219    object-position: 80% 40%;
220}
221 
222[data-bg-position="90 40"] {
223    object-position: 90% 40%;
224}
225 
226[data-bg-position="100 40"] {
227    object-position: 100% 40%;
228}
229 
230[data-bg-position="0 50"] {
231    object-position: 0% 50%;
232}
233 
234[data-bg-position="10 50"] {
235    object-position: 10% 50%;
236}
237 
238[data-bg-position="20 50"] {
239    object-position: 20% 50%;
240}
241 
242[data-bg-position="30 50"] {
243    object-position: 30% 50%;
244}
245 
246[data-bg-position="40 50"] {
247    object-position: 40% 50%;
248}
249 
250[data-bg-position="50 50"] {
251    object-position: 50% 50%;
252}
253 
254[data-bg-position="60 50"] {
255    object-position: 60% 50%;
256}
257 
258[data-bg-position="70 50"] {
259    object-position: 70% 50%;
260}
261 
262[data-bg-position="80 50"] {
263    object-position: 80% 50%;
264}
265 
266[data-bg-position="90 50"] {
267    object-position: 90% 50%;
268}
269 
270[data-bg-position="100 50"] {
271    object-position: 100% 50%;
272}
273 
274[data-bg-position="0 60"] {
275    object-position: 0% 60%;
276}
277 
278[data-bg-position="10 60"] {
279    object-position: 10% 60%;
280}
281 
282[data-bg-position="20 60"] {
283    object-position: 20% 60%;
284}
285 
286[data-bg-position="30 60"] {
287    object-position: 30% 60%;
288}
289 
290[data-bg-position="40 60"] {
291    object-position: 40% 60%;
292}
293 
294[data-bg-position="50 60"] {
295    object-position: 50% 60%;
296}
297 
298[data-bg-position="60 60"] {
299    object-position: 60% 60%;
300}
301 
302[data-bg-position="70 60"] {
303    object-position: 70% 60%;
304}
305 
306[data-bg-position="80 60"] {
307    object-position: 80% 60%;
308}
309 
310[data-bg-position="90 60"] {
311    object-position: 90% 60%;
312}
313 
314[data-bg-position="100 60"] {
315    object-position: 100% 60%;
316}
317 
318[data-bg-position="0 70"] {
319    object-position: 0% 70%;
320}
321 
322[data-bg-position="10 70"] {
323    object-position: 10% 70%;
324}
325 
326[data-bg-position="20 70"] {
327    object-position: 20% 70%;
328}
329 
330[data-bg-position="30 70"] {
331    object-position: 30% 70%;
332}
333 
334[data-bg-position="40 70"] {
335    object-position: 40% 70%;
336}
337 
338[data-bg-position="50 70"] {
339    object-position: 50% 70%;
340}
341 
342[data-bg-position="60 70"] {
343    object-position: 60% 70%;
344}
345 
346[data-bg-position="70 70"] {
347    object-position: 70% 70%;
348}
349 
350[data-bg-position="80 70"] {
351    object-position: 80% 70%;
352}
353 
354[data-bg-position="90 70"] {
355    object-position: 90% 70%;
356}
357 
358[data-bg-position="100 70"] {
359    object-position: 100% 70%;
360}
361 
362[data-bg-position="0 80"] {
363    object-position: 0% 80%;
364}
365 
366[data-bg-position="10 80"] {
367    object-position: 10% 80%;
368}
369 
370[data-bg-position="20 80"] {
371    object-position: 20% 80%;
372}
373 
374[data-bg-position="30 80"] {
375    object-position: 30% 80%;
376}
377 
378[data-bg-position="40 80"] {
379    object-position: 40% 80%;
380}
381 
382[data-bg-position="50 80"] {
383    object-position: 50% 80%;
384}
385 
386[data-bg-position="60 80"] {
387    object-position: 60% 80%;
388}
389 
390[data-bg-position="70 80"] {
391    object-position: 70% 80%;
392}
393 
394[data-bg-position="80 80"] {
395    object-position: 80% 80%;
396}
397 
398[data-bg-position="90 80"] {
399    object-position: 90% 80%;
400}
401 
402[data-bg-position="100 80"] {
403    object-position: 100% 80%;
404}
405 
406[data-bg-position="0 90"] {
407    object-position: 0% 90%;
408}
409 
410[data-bg-position="10 90"] {
411    object-position: 10% 90%;
412}
413 
414[data-bg-position="20 90"] {
415    object-position: 20% 90%;
416}
417 
418[data-bg-position="30 90"] {
419    object-position: 30% 90%;
420}
421 
422[data-bg-position="40 90"] {
423    object-position: 40% 90%;
424}
425 
426[data-bg-position="50 90"] {
427    object-position: 50% 90%;
428}
429 
430[data-bg-position="60 90"] {
431    object-position: 60% 90%;
432}
433 
434[data-bg-position="70 90"] {
435    object-position: 70% 90%;
436}
437 
438[data-bg-position="80 90"] {
439    object-position: 80% 90%;
440}
441 
442[data-bg-position="90 90"] {
443    object-position: 90% 90%;
444}
445 
446[data-bg-position="100 90"] {
447    object-position: 100% 90%;
448}
449 
450[data-bg-position="0 100"] {
451    object-position: 0% 100%;
452}
453 
454[data-bg-position="10 100"] {
455    object-position: 10% 100%;
456}
457 
458[data-bg-position="20 100"] {
459    object-position: 20% 100%;
460}
461 
462[data-bg-position="30 100"] {
463    object-position: 30% 100%;
464}
465 
466[data-bg-position="40 100"] {
467    object-position: 40% 100%;
468}
469 
470[data-bg-position="50 100"] {
471    object-position: 50% 100%;
472}
473 
474[data-bg-position="60 100"] {
475    object-position: 60% 100%;
476}
477 
478[data-bg-position="70 100"] {
479    object-position: 70% 100%;
480}
481 
482[data-bg-position="80 100"] {
483    object-position: 80% 100%;
484}
485 
486[data-bg-position="90 100"] {
487    object-position: 90% 100%;
488}
489 
490[data-bg-position="100 100"] {
491    object-position: 100% 100%;
492}

Comments

A.R.

1 year ago

I like the idea behind this snippet but it does add quite a bit of code so I would really only suggest anyone uses this if they will make good use of it, if you are only applying for a couple of images it might be better to just use some custom CSS targeting them 🙏🏻😎

Related Snippets

Please see some snippets below related to this snippet..

Styling

Unverified

default css

Added: 8 months ago

Last Updated: 8 months ago

View

Styling

Public

Divi Hamburger Menu Everywhere

Added: 2 years ago

Last Updated: 11 months ago

Make Divi Hamburger menu the default and add the word Menu to it Note: This works only with the Divi theme

View

Styling

AI Verified

Hex Transparency Converter

Added: 9 months ago

Last Updated: 9 months ago

When adjusting the transparency of a colour the amount of transparency is shown as a Hexadecimal value, not a percentage. So it is difficult to set the transparency to say 75% other than a guess. This...

View

Other Snippets in this Codevault

These are some popular snippets from this users codevault..

WordPress Admin

AI Verified

ACF Backend

Added: 2 years ago

Last Updated: 1 year ago

customizes the ACF where you edit pages and posts

View

Styling

Unverified

img position

Added: 2 years ago

Last Updated: 2 years ago

adds object-position dynamically

View