Menu
So my website should be multilingual. To let the user change between languages there will be flags in a dropdown.
To get a better resize ability for my images (of the flags) I wanted to create them soley via CSS. However I failed doing this, so I created little 1x3 and 3x1 .jpgs files which I wanted to resize via CSS.
Here are 2 examples I created:
(Most likely you should just download the pictures and scale them really high to understand what I did.)
My plan was using the image-rendering properties pixelated to get a resized images without any smoothing or color gradients and it worked fine until I used IE.
I created a little code snippet to recreate the basic idea:
.ger {
image-rendering: pixelated;
background-image: url(https://i.sstatic.net/tNV8n.jpg);
background-size: 1px 45px;
background-repeat: repeat;
}
.fr {
image-rendering: pixelated;
background-image: url(https://i.sstatic.net/ErVbV.jpg);
background-size: 120px 1px;
background-repeat: repeat;
}
#flag1, #flag2{
width: 120px;
height: 45px;
}
<body>
<div id="flag1" class="ger"></div>
<br/>
<div id="flag2" class="fr"></div>
</body>But I guess I'm too new to this topic to be able to do it right. Because somehow it won't show the german flag to you.
Anyways... I can't ask you to make IE starting to support this function. But what I can ask is if you know some way to work arround this.
If not, do you know some way to create these simple flags just using CSS?
I was thinking of three divs of different colors beneith each other. For example:
.black, .red, .yellow{
width:800px;
height:100px;
}
.black{
background-color:black;
}
.red{
background-color:red;
}
.yellow{
background-color:yellow;
}<div class="black"></div>
<div class="red"></div>
<div class="yellow"></div>... for the german flag.
But if I try to implement something similar into my dropwdown... I fail...
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, #dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li.dropdown {
display: inline-block;
float: right;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
.black, .red, .yellow{
width:60px;
height:10px;
}
.black{
background-color:black;
}
.red{
background-color:red;
}
.yellow{
background-color:yellow;
}<ul>
<li><a class="logo">Logo</a></li>
<li class="dropdown">
<a href="#" id="dropbtn" class="fr"><div class="black"></div><div class="red"></div><div class="yellow"></div></a>
<div class="dropdown-content">
<a href="#">Flag 1</a>
<a href="#">Flag 2</a>
<a href="#">Flag 3</a>
</div>
</li>
</ul>Because if I do it like this, it will never have the full size of the bar, will it?
I'm sorry for providing so much information, because it's propably just too much. However these were my attempts and I really have no clue what I'm missing out onto.
In the ende the bar (shown in the last snippet) should contain a flag. The flag should touch the right and upper border of the window and the bottom broder of the bar. If you hover over it a dropdown should appear with similar flags.
If I wasn't clear at some point just ask I will try to make it clearer.
267
asked Dec 07 '25 03:12
The problem with the first snippet is that there were <style> tags in the CSS section of the snippet, and that was messing it up.
.ger {
image-rendering: pixelated;
background-image: url(https://i.sstatic.net/tNV8n.jpg);
background-size: 1px 45px;
background-repeat: repeat;
}
.fr {
image-rendering: pixelated;
background-image: url(https://i.sstatic.net/ErVbV.jpg);
background-size: 120px 1px;
background-repeat: repeat;
}
#flag1,
#flag2 {
width: 120px;
height: 45px;
}<body>
<div id="flag1" class="ger"></div>
<br/>
<div id="flag2" class="fr"></div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
