dynamic css images

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Gerben van Laar 12 posts 102 karma points

Jun 12, 2017 @ 10:42

0

Dynamic CSS images

Hi Everyone,

I've made a parallax effect in CSS. to achieve this effect I have set a background-image in css. Now I would like to implement this in my Umbraco site.

Is there a way to make this dynamic? So my client could change the image easily in the Back-office.

Thanks in advance, Gerben

Copy Link
Alex Brown 129 posts 620 karma points

Jun 12, 2017 @ 13:14

0

Do you want to make it so that the user can change the parallax image?

What version of Umbraco are you using?

Copy Link
Gerben van Laar 12 posts 102 karma points

Jun 13, 2017 @ 14:35

0

Thank you very much for your quick reply.

Exactly. My client would like to change the parallax image. I'm using Umbraco 7.6.3.

I look forward to your reply

Gerben

Copy Link
Alex Brown 129 posts 620 karma points

Jun 13, 2017 @ 15:25
1
You will need to create a property editor for the page which is having the dynamic image in the CMS, as a single media picker.

After uploading an image you can then insert it directly into the styling.

Set the background-image: url() on the view, using inline CSS. You can then use Razor to insert the CMS image into the CSS style.

Example:
```
@{
  var image = Model.Content.GetPropertyValue<IPublishedContent>("image");
}
< img style="background-image: url(@image.Url)" class="your_css_class"/>
```
Please let me know if you need more detail or this doesn't work.
Copy Link
Gerben van Laar 12 posts 102 karma points

Jun 17, 2017 @ 09:25

0

Hi Alex,

I would like to thank you for your quick reply.

Your solution worked beautifly. Thank you so much. i really appreciate it.

kind regards, Gerben

Copy Link
Comment author was deleted

Jan 03, 2018 @ 23:57
I would like to add a question here:

I would like to insert a background image on a class:after. Is it even possible?
```
<div class="test">
    <img src="http://blablabla.jpg">
</div>
```
css:
```
.test { some css; }
.test:after { background: url(@myDynamicImg) no-repeat;}
```
My problem is that I would like to use this fix: https://stackoverflow.com/questions/28710659/css-background-image-on-top-of-img because I currently have a problem when I want to apply a filter grayscale and my div background image suddenly switch on the second floor.

Thank you
Copy Link
Steve Morgan 1349 posts 4459 karma points c-trib

Jan 04, 2018 @ 13:30

0

Hi,

Happy to be corrected but as far as I know the only way to do this would be with some on page css in your template.

Umbraco doesn't get involved in the serving of your CSS so razor tags won't work. I'm not sure if you could / should try and make it do it.

HTH

Steve

Copy Link
Comment author was deleted

Jan 04, 2018 @ 13:33

do you suggest to insert a JS function to add the ":after" css at the end of the charge of the page? would it work as the css is charged before?

Copy Link
Steve Morgan 1349 posts 4459 karma points c-trib

Jan 04, 2018 @ 15:22

0

You could do it by JS or your could just write out the CSS rule in your cshtml template / partial and use razor to output the image from the picker.

I hate these sort of hacks but I'm yet to find a suitable workaround.

Copy Link
Comment author was deleted

Jan 04, 2018 @ 15:23

Will try and see if it works, thank you Steve

Copy Link
OleP 67 posts 276 karma points

Jan 04, 2018 @ 21:38
0
Alternatively you can use a data attribute:

HTML:
```
<div class="test" data-background-image="http://blablabla.jpg"></div>
```
JS:
```
var element = querySelector(".test");
if(element != undefined){
   element.dataset.background-image;
}
```
Not a lot different, but at least you don't need a style block in your template.
Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?