CSS background-image will not show up
Question
I am looking to create a header with a logo link that changes color upon hover. For this reason I want to use the "background-image" property instead of simply using an img tag in the HTML. I am trying to enter my logo in the background image URL inside of div.logo but for some reason it is not appearing. I have tried entering the path in multiple different ways. Most recently, I uploaded the picture online and tried using the hosting URL (seen in code below) but not even this is working. Can anyone help me out?
HTML
<body>
<header>
<div class="logo"></div>
<nav>
<a href="#" title="User"><%= image_tag("new-user-icon.png", class: "user-icon") %></a>
<a href="#" title="About"><%= image_tag("about-icon.png", class: "about-icon") %></a>
<a href="#" title="Contact"><%= image_tag("contact-icon.png", class: "contact-icon") %></a>
<a href="#" title="Main Menu" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="dropdown" >
<%=image_tag("new-menu-icon.png", class: "menu-icon") %>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Assets</a>
<a class="dropdown-item" href="#">Debts</a>
<a class="dropdown-item" href="#">Incomes</a>
<a class="dropdown-item" href="#">Expenses</a>
<a class="dropdown-item" href="#">Transfers</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Account</a>
<a class="dropdown-item" href="#">Log Out</a>
</div>
</div>
</nav>
</header>
...
</body>
CSS (Sass)
header{
display:inline-block;
background: rgb(125,185,232);
background: -moz-linear-gradient(left, rgba(125,185,232,1) 0%,
rgba(32,124,202,1) 0%, rgba(32,124,202,1) 0%, rgba(98,189,234,1) 0%,
rgba(129,202,237,1) 50%, rgba(98,189,234,1) 100%);
background: -webkit-linear-gradient(left, rgba(125,185,232,1) 0%,rgba(32,124,202,1) 0%,rgba(32,124,202,1) 0%,rgba(98,189,234,1) 0%,rgba(129,202,237,1) 50%,rgba(98,189,234,1) 100%);
background: linear-gradient(to right, rgba(125,185,232,1) 0%,rgba(32,124,202,1) 0%,rgba(32,124,202,1) 0%,rgba(98,189,234,1) 0%,rgba(129,202,237,1) 50%,rgba(98,189,234,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#7db9e8', endColorstr='#62bdea',GradientType=1 );
border-bottom: 1px solid $universal-background;
height: 55px;
width: 100%;
float: right;
margin-bottom: 0;
padding: 0;
div.logo{
float: left;
height: 55px;
width: 100px;
background-color: transparent;
background-image: url('https://image.ibb.co/nw64yw/logo_white.png');
}
}
2 answers
solution1
1 2017-10-12 10:03:51
Add this CSS
div.logo {
float: left;
height: 55px;
width: 140px;
background-color: transparent;
background-image: url(https://image.ibb.co/nw64yw/logo_white.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: 0px 13px;
}
solution2
1 ACCPTED 2017-10-12 12:03:12
The problem
Your basic problem is that the background-image ignores the dimensions of the container. Since your image file is very big, you can not see anything of it because it is only showing the transparent upper-left corner. Also there are some styles missing which you need to apply to show the background-image appropriate.
What do you need to do?
background-position: centerThis makes sure that the background-image will be placed centered inside the container.background-size: containThis specifies the size of the background images. This property arrived with CSS3 and solved a lot of problems with background images. Your are able to add pixel values orcontain/cover.Containscales the image to the largest size to fit inside the container.Coverscales the image to the largest size to cover the whole container. W3C referencebackground-repeat: no-repeatWe only wont to show the image once (obvious).
Code snippet separate properties:
.logo {
background-size: contain;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-image: url('https://image.ibb.co/nw64yw/logo_white.png');
}
Code snippet with shorthand: ( W3C reference )
.logo {
background-size: contain;
background-image: transparent url('path_to_image.png') center no-repeat;
}
I hope that helps you to understand what went wrong. If you have any additional questions, feel free to ask.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.