Giter Site home page Giter Site logo

image border problem about reveal-hugo HOT 5 CLOSED

dzello avatar dzello commented on May 18, 2024
image border problem

from reveal-hugo.

Comments (5)

Kwask94 avatar Kwask94 commented on May 18, 2024

I use . im going to use svg on all my presentiation is there best way to embed svg
and how can i make it full screen
thanks

from reveal-hugo.

joshed-io avatar joshed-io commented on May 18, 2024

Hi @Kwask94, thanks for opening the issue and glad you are finding the project useful!

To embed an SVG you should just be able to use normal image syntax in the markdown:

![My SVG](/images/my.svg)

If you want the image to be full screen, you can set it to be the background image of a slide. I added an example of that to the documentation presentation, it's Slide 30.

The code to put in the markdown is:

---

{{< slide background-image="/images/alex-litvin-790876-unsplash.jpg" >}}

---

As for taking the border and the image off, your best friend there is the web inspector to see where those styles are coming from, possibly somewhere else in the CSS.

Hope that helps!

from reveal-hugo.

Kwask94 avatar Kwask94 commented on May 18, 2024

Thanks a lot

from reveal-hugo.

Kwask94 avatar Kwask94 commented on May 18, 2024
---

{{< slide background-image="/images/alex-litvin-790876-unsplash.jpg" >}}

---

When I used background image and transition it breaked

{{< slide transition="fade" transition-speed="fast" >}}
{{< slide background-image="/h-page-3.png" >}}

from reveal-hugo.

joshed-io avatar joshed-io commented on May 18, 2024

Try putting all three attributes in one slide shortcode, like this:

{{< slide transition="fade" transition-speed="fast" background-image="/h-page-3.png" >}}

from reveal-hugo.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.