How to set a background to a specific size?

[Hip]

Hey guys

 

I want to put a logo in the top left corner of my website inside a <div> but somehow it doesn't work at all.

Can you tell me how to do this? The width is 10em and the hight is 2em.

I currently have a empty <div id="nav-logo"> and in the css file I set the #nav-logo background to the image, but the image is not being displayed at all.

 

Thanks in advance!

[Mira Yurizaki]

Use the background-size property

 

For images make sure you're wrapping the location in url(). If it's a local file, use a relative path to point to it.

[Hip]

8 hours ago, Mira Yurizaki said:

Use the background-size property

 

For images make sure you're wrapping the location in url(). If it's a local file, use a relative path to point to it.

I tried all that and somehow it does not work. Can you tell me where the mistake is?

 

html:

 <nav>
            <div id="nav-logo">
                
            </div>
 </nav>

 

css:

#nav-logo
{
    margin-left: 1.5em;
    margin-top: 0;
    width: 10em;
    height: 2em;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../Images/logo.png);
    overflow: hidden;
}

 

[Mira Yurizaki]

 

8 hours ago, Hip said:

I tried all that and somehow it does not work. Can you tell me where the mistake is?

Use the inspector (F12 on most browsers) to make sure the image can be located.

[Hip]

1 hour ago, Mira Yurizaki said:

 

Use the inspector (F12 on most browsers) to make sure the image can be located.

Ok I tried but somehow when I hover above the site there is no image at all. How can this be?

[Mira Yurizaki]

46 minutes ago, Hip said:

Ok I tried but somehow when I hover above the site there is no image at all. How can this be?

I derped. HTML inspectors won't be able to find the image if the image is referenced via CSS file.  In any case, I tried the code in JSFiddle, only replaced the image path with your LTT picture and it works: https://jsfiddle.net/w5zLfsvn/

 

Alternatively, unless you need to have it as a background, just use an img tag.

[Hip]

1 hour ago, Mira Yurizaki said:

I derped. HTML inspectors won't be able to find the image if the image is referenced via CSS file.  In any case, I tried the code in JSFiddle, only replaced the image path with your LTT picture and it works: https://jsfiddle.net/w5zLfsvn/

 

Alternatively, unless you need to have it as a background, just use an img tag.

I see, but maybe I have this troubles because the background is transparent?

I tried again and it worked, then I removes padding and it is gone again. I put in padding and it still is gone lol

 

update:

I removed background-size and I see the logo. Though it is not in the correctsize yet

[Mira Yurizaki]

1 hour ago, Hip said:

I see, but maybe I have this troubles because the background is transparent?

I tried again and it worked, then I removes padding and it is gone again. I put in padding and it still is gone lol

 

update:

I removed background-size and I see the logo. Though it is not in the correctsize yet

Try to see if the image shows up without any sizing or otherwise as a sanity check.