CODEWITHSUNDEEP
htmlcss
TK-421
TK-421

Reputation: 10763

How can I align a background image to the left of centered text in an h1?

I need to align an image just to the left of some text in an h1. So imagine it's something like:

[logo image] Company

So it isn't really a "background"--it's more of a foreground image.

This works if the h1 is left-aligned, using padding to offset the text from the image:

h1 {
  background: url("logo.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  line-height: 70px;
  padding-left: 80px;
}

However, I also want to center the text. I can do that as follows, but the image is still left-aligned:

h1 {
  background: url("logo.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  line-height: 70px;
  padding-left: 80px;
  text-align: center;
}

In other words, the text is in the center of the screen, but the image is still on the left margin.

How can I keep the image centered, but just to the left of the text? I don't want to get too tricky with absolute pixel values, or a fixed-width h1, as this all needs to be relative and responsive.

I can't center the background image, as it needs an offset for the h1 text, which needs to scale.

Should I just slap an img tag in there and be done with this?

Another option would be to make the whole thing an image, but I want the text to scale--it's actually more of a caption than a logo.

[Note: I googled a bunch but most of the links deal with the "centered h1 over a large background image" scenario, which this isn't. Thanks!]

Upvotes: 1

Views: 2915

Answers (4)

Nathan
Nathan

Reputation: 1525

there are several options already, and this one comes with an "IF" but i'm adding it here for variety.

If you can specify the width of the H1 tag then you can use padding and margin:auto to achieve this. 

h1#elementID {
    background-image: url("img.png");
    background-repeat: no-repeat;
    margin: auto;
    width: 165px;
    padding-left: 45px;
}

adjusting the width / padding to fit your text image. It may improve scaling if you use something besides px as your sizing mechanism.

Upvotes: 1

matewka
matewka

Reputation: 10158

Here's my approach:

h1 {
    text-align: center;
}
h1::before {
    content: url("http://placekitten.com/200/80");
    display: inline-block;
    vertical-align: middle;
    height: 80px;
    width: 200px;
    margin-left: -200px;
}

Since you know the image dimensions, you can play with negative margin-left. As you can see, the text alignment is NOT affected by the image. Is that what you wanted to achieve?

Here's the jsFiddle demo

Upvotes: 2

gvee
gvee

Reputation: 17171

UPDATED

h1 {
    background: no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    line-height: 70px;
    text-align: center;
}
h1:before {
    content: url("logo.png");
    float: left;
}

DEMO: http://jsfiddle.net/4HQ8T/3/

I learned something new about the content CSS here, thanks!

Upvotes: 4

Steffen
Steffen

Reputation: 86

Since you know how big everything is you could try it with background-position porperty and then give % value to x.

h1 {
background: url("logo.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
line-height: 70px;
padding-left: 80px;
text-align: center;
background-position:20% (e.g.);
}

But to be honest, i would recommend using an image tag. You can give that image some responsiveness like done in bootstrap Bootstrap

Upvotes: 1

Related Questions