CODEWITHSUNDEEP
htmlcssimage
user2014
user2014

Reputation: 21

How to add logo on background image using html css

I want to put a logo on background image please guide me how to do it 

body {
  background: url("../graphics/homepage-image.jpg") no-repeat top left;
  background-size: cover;
  clear: both;
  padding: 0px;
  margin: 0px;
}

.logo {
  background: url("../graphics/dhaka logo.png");
  padding: 0px;
  margin: 0px;
  width: 150px;
  height: 50px;
}
<body>

  <div class="logo">

  </div>

  <nav>
    <ul>
      <li>
        <a href=""></a>Login</li>
      <li>
        <a href=""></a>Sign up</li>
      <li>
        <a href=""></a>Contact us</li>
      <li>
        <a href=""></a>Feedback</li>
      <li>
        <a href=""></a> About us </li>
      <li>
        <a href=""></a> Home</li>



    </ul>

  </nav>



  <div id="footer">

    <p>&copy; Copyrights Dhaka Bangladesh 2015</p>
  </div>
</body>

Upvotes: 2

Views: 53463

Answers (4)

Hassan Siddiqui
Hassan Siddiqui

Reputation: 2845

Just add background-repeat: no-repeat; and background-size: cover; in logo CSS.

.logo {
      background-image: url("../graphics/dhaka logo.png");
      background-repeat: no-repeat;
      background-size: cover;
      padding: 0px;
      margin: 0px;
      width: 150px;
      height: 50px;
}

Avoid spaces in file/image name like dhaka logo.png you can replace space with %20 like dhaka%20logo.png. But i would suggest to change your image name dhaka-logo.png.

You can see the W3C Spec for the full requirements.

body {
  background: url("../graphics/homepage-image.jpg") no-repeat top left;
  background-size: cover;
  clear: both;
  padding: 0px;
  margin: 0px;
}

.logo {
  background-image: url("../graphics/dhaka logo.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0px;
  margin: 0px;
  width: 150px;
  height: 50px;
}
<body>
  <div class="logo"></div>
  <nav>
    <ul>
      <li><a href=""></a>Login</li>
      <li><a href=""></a>Sign up</li>
      <li><a href=""></a>Contact us</li>
      <li><a href=""></a>Feedback</li>
      <li><a href=""></a> About us </li>
      <li><a href=""></a> Home</li>
    </ul>
  </nav>
  <div id="footer">
    <p>&copy; Copyrights Dhaka Bangladesh 2015</p>
  </div>
</body>

Upvotes: 2

user5125729
user5125729

Reputation:

Try this out

<!doctype html>
<head>
<style>
body {
background: url("../graphics/homepage-image.jpg") no-repeat top left;
background-size:cover;
clear:both;
padding:0px;
margin:0px;
}

.logo {    
background-image: url('../graphics/dhaka logo.png'); 
padding:0px;
margin:0px;
width:150px;
height:50px;
}
</style>
</head>
<body> 

           <ul> 
               <li><a href=""></a>Login</li>
               <li><a href=""></a>Sign up</li>
               <li><a href=""></a>Contact us</li>
               <li><a href=""></a>Feedback</li>
               <li><a href=""></a> About us </li>
               <li><a href=""></a> Home</li>
           </ul>
    <div class="logo"> 
    </div>
      <div id="footer">

          <p>&copy; Copyrights Dhaka Bangladesh 2015</p> 
      </div>
</body>
</html>

Upvotes: 0

imGaurav
imGaurav

Reputation: 1053

body{

background: url('http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png') no-repeat;
 
  width: 200px;
  height: 200px;
 background-attachment: fixed;
background-position: center; 
  padding: 0;
  margin: 0;
    
}
<body></body>

.logo {
  background-image: url('http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png');
  width: 200px;
  height: 200px;
  display: inline-block;
}
<div class="logo"></div>

Upvotes: 0

gyosko
gyosko

Reputation: 527

Put the logo in a div

<div id="my_logo"></div>

And then style it:

#my_logo{
    background: url"../graphics/dhaka logo.png");
    width : your_logo_width;
    height : your_logo_height;
}
body{
background: url("../graphics/homepage-image.jpg") no-repeat top left;

overflow: hidden;

background-size:cover;
clear:both;
padding:0px;
margin:0px;
}

Upvotes: 0

Related Questions