Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Hip

How to set a background to a specific size?

Recommended Posts

Posted · Original PosterOP

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!


Do you like tactical shooters? Play Project Reality for free!

Use Brave or tor browser to surf through the web! :x And don't forget to use DuckDuckGo or StartPage instead of Google!

itcoin accepting VPN services: NordVPN

itcoin accepting Computer Store in Europe: caseking and overclockers

Link to post
Share on other sites
Posted · Original PosterOP
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;
}

 


Do you like tactical shooters? Play Project Reality for free!

Use Brave or tor browser to surf through the web! :x And don't forget to use DuckDuckGo or StartPage instead of Google!

itcoin accepting VPN services: NordVPN

itcoin accepting Computer Store in Europe: caseking and overclockers

Link to post
Share on other sites
Posted · Original PosterOP
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?


Do you like tactical shooters? Play Project Reality for free!

Use Brave or tor browser to surf through the web! :x And don't forget to use DuckDuckGo or StartPage instead of Google!

itcoin accepting VPN services: NordVPN

itcoin accepting Computer Store in Europe: caseking and overclockers

Link to post
Share on other sites
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.

Link to post
Share on other sites
Posted · Original PosterOP
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


Do you like tactical shooters? Play Project Reality for free!

Use Brave or tor browser to surf through the web! :x And don't forget to use DuckDuckGo or StartPage instead of Google!

itcoin accepting VPN services: NordVPN

itcoin accepting Computer Store in Europe: caseking and overclockers

Link to post
Share on other sites
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.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×