Photoshop Question posted in
The official user guide can be found here.

Problems with logo not appearing on background image – Photoshop

I used photoshop to layer a logo over a background image. I have the background image set up that it is responsive. I set up a image map to use the logo as a main page link. I works well on two of the other pages of the site but this page is different because of the way the background image is set up. I thought I could play a trick by using a transparent image along with usemap. did not work. I am able to see the hand when I hover over the image map, but there is no logo there. the url is http://jandswebsitedesigns.com/test/index.html. an example of the logo on the upper left hand corner is http://jandswebsitedesigns.com/test/im-new-here.html. I had a similar problem with the im-new-here page. The “top-bar” div (which is transparent) that is on top of the upper part of the image, was covering the clickable area. Samuel responded and I added div#top-bar { height: 0px; } and it fixed it. worked nicely, but the same fix won’t work here. 

<style>
body  {

background: url(images/cd-background-1.png) no-repeat center center   fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;  
position: relative; 
min-height: 100%;  
z-index: 1;   }  
</style>

<div style="text-align:  center; height:  800px;">
    <img src="images/trans.png" usemap="#logomap">
        <map name="logomap">
            <area shape="poly" coords="11,2,430,3,432,307,3,320"   

             style="outline:none;" href="index.html" alt="main page">
        </map>


 </div>
Tags:

2

Answers


  1. 0

    An image background may not appear if height and width are not set for the element that containing it 

    html, body{
    width:100%;
    height: 100%:
}
.my-div{
    display: block:
    width: // must give width
    height: // must give height
    background-image: url('...'):
}
    Login or Signup to reply.
  2. 0

    First of all, I would recommend not using usemap, since it would make it harder to port your site to a mobile audience.

    A better approach (which I personally use a lot and which would work on the design in question) is to make a div with full width and a given height, and to add the logo inside of it.

    The HTML would look something like this:

    <div class="header">
    <a href="#" class="logo"></a>
</div>

    The CSS could then look like this:

    .header {
    background-image: url(...);
    background-position: center;
    background-attachment: fixed;
    background-size: cover;

    display: block;
    height: 800px;
}
.header .logo {
    width: 400px;
    height: 300px;
    display: inline-block;

    background-image: url(...);
    background-position: center;
    background-repeat: no-repeat;
}

    It’s something different from your current approach, but would fix your problem with the logo.

    EDIT: I’ve put up a little fiddle about the problem, to give more context in case necessary.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search