CODEWITHSUNDEEP
htmlcss
Greg
Greg

Reputation: 3063

Best way to add text to a logo image

I'd like to achieve something like the picture below for my logo but only the black rectangle would be an image, I'd like the text to be real text. I tried the code below (see also jsfiddle http://jsfiddle.net/ueZ2H/ which seems to be working) but not sure if this is a clean and efficient manner to achieve this? Many thanks

<div id="header">
    <div id="logo">
        <div class="name">Dave Black</div>
        <div class="address">Address in Paris</div>
        <div class="job">Job</div>
    </div>
</div

CSS:

/***********/
/*! Reset  */
/***********/
* {
    margin: 0;
    padding: 0;
    border: 0;

}
Html, body {
    margin: 0;
    padding: 0;
    background: #fff;
    font-family:'Open Sans', sans-serif;
}
/************/
/*! Header  */
/************/
#header {
    width: 100%;
    height: 280px;
}
#logo {
    float: left;
    margin-left: 20px;
    color: #000;
    height: 95px;
    font-size: 20px;
    background-image: url("http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg");
    background-repeat: no-repeat;
}
#logo .name {
    padding-left:90px;
    color: red;
}
#logo .address {
    padding-left:90px;
    color: green;
}
#logo .job {
    padding-left:90px;
    color: purple;
}

enter image description here

Upvotes: 0

Views: 182

Answers (3)

andrew
andrew

Reputation: 9583

I trimmed some of the fat from the css

 Html, body {
margin: 0;
padding: 0;
border: 0;
background: #fff;
font-family:'Open Sans', sans-serif;
}

 #header {
width: 100%;
height: 280px;
}

 #logo {
float: left;
margin-left: 20px;
height: 95px;
font-size: 20px;
background: url("http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg")   no-repeat;
padding-left:90px;
}

#logo .name {
 color: red;
}

#logo .address {
color: green;
}

#logo .job {
color: purple;
}

http://jsfiddle.net/KpjYS/2/

Upvotes: 1

beautifulcoder
beautifulcoder

Reputation: 11320

This works, I would change font-size and vertical-align to make it pop. Text will always render better than image-text in browsers.

Upvotes: 0

Paul Roub
Paul Roub

Reputation: 36438

Save yourself some CSS, and make adding other fields easier, by including the padding in the container, not on the name, etc. lines. The background image will stay in place.

#logo {
    float: left;
    margin-left: 20px;
    color: #000;
    height: 95px;
    font-size: 20px;
    background-image: url("http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg");
    background-repeat: no-repeat;
    padding-left: 90px;
}

#logo .name {
    color: red;
}

#logo .address {
    color: green;
}

#logo .job {
    color: purple;
}

Also, unless you plan on using name, address and job classes elsewhere, there's no reason to qualify them here:

.name {
    color: red;
}

.address {
    color: green;
}

.job {
    color: purple;
}

Updated fiddle: http://jsfiddle.net/ueZ2H/1/

Upvotes: 2

Related Questions