Question 42989 in Html Question posted in
Some basic documentation can be found here.

Add SVG on the left of the footer using only CSS – Html

French speaker sorry for bad syntax or misspelled words

Hi, my Uni asked an odd question in an assignment. They asked to add a SVG on the left of the footer using only CSS (the svg file is not in the html I have to had it in the css file). I tried using footer::before in CSS but the svg is too big and if I try to scale it, it just go down outside the footer.

Here is the full code of what I tried:

footer{
  height:50px;
  margin-top:10px;
  background-color:rgba(120,120,0,0.6);
}
footer::before {
  content: url(https://img.uefa.com/imgml/uefacom/ucl/2021/logos/logo_dark.svg);
  float: left;
  scale: 0.1;
}
body {
  background: black;
}
<footer>
  <strong>Projet TW1 2023 : ma petite compo</strong><br> données issues de <a href="https://www.uefa.com/uefachampionsleague/" target="_blan ">uefa.com</a>
</footer>

Please note that I can’t erase or modify existing rule for footer{} I can only add new rules.
I also tried to add directly the svg code with content: url("data:image/svg+xml;<svg>...</svg>") but I could not get this to work

Screenshot of how it is :enter image description here

And how it should be :enter image description here

Thanks

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to u/tridd3r on rediit for the answer.
    His codepen Here

    The solution was to add the svg as the background of footer::before and not a content :

    footer{
  height:50px;
  margin-top:10px;
  background-color:rgba(120,120,0,0.6);
}
footer::before {
content: "";
background-image:url(https://img.uefa.com/imgml/uefacom/ucl/2021/logos/logo_dark.svg);
background-size:contain;
background-repeat: no-repeat;
float:left;
display:block;
margin: 1px 15px 5px 5px;
height: 45px;
width:45px;
}
body {
  background: black;
}

    <footer>
  <strong>Projet TW1 2023 : ma petite compo</strong><br> données issues de <a href="https://www.uefa.com/uefachampionsleague/" target="_blan ">uefa.com</a>
</footer>

  2. 0

    The closest I could get was with using transform: scale(10%); and setting display: inline-block; and transform-origin: bottom left; instead of float:left; and scale: 0.1;

    footer::before {
  content: url(https://img.uefa.com/imgml/uefacom/ucl/2021/logos/logo_dark.svg);
  display: inline-block;
  transform: scale(10%);
  transform-origin: bottom left;
}

body {
  background: lightgreen;
}
    <footer>
  <strong>Projet TW1 2023 : ma petite compo</strong><br> données issues de <a href="https://www.uefa.com/uefachampionsleague/" target="_blan ">uefa.com</a>
</footer>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search