How can I have a div with an image with a white background floated left?

Question

my code in css is:

.logo{
content:url(http://www.dylionsrugby.com.au/wp-content/uploads/2012/04/lion.png/600x600);
background-color: White;
float: right;
}

and in html I have:

<div class="logo"></div>

Am I missing something, nothing appears?`

Answer 1

Your question is somewhat general. You could also simulate the right positioning using positioning property on the image and not on the div.

 .logo{ width: 250px; height: 75px; background-image: url("http://www.slate.com/content/dam/slate/articles/health_and_science/science/2015/07/150730_SCI_Cecil_lion.jpg.CROP.promo-xlarge2.jpg"); background-color: white; background-repeat: no-repeat; background-size: 100% 100%; float: right; } 

 <div class="logo"></div> 

Answer 2

First of all, the "content" property is used for :before and :after pseudo-elements. Second, the link to the image is incorrect. I assume that you want the picture inside the div .logo with a white background so here is a jsfiddle: https://jsfiddle.net/Iulius90/njne5sy5/

code:

.logo {
background: white url(http://www.dylionsrugby.com.au/wp-content/uploads/2012/04/lion.png) no-repeat center;
background-size: cover;
float: right;
width: 200px;
height: 200px;
}