CODEWITHSUNDEEP
htmlcssbackground
Petr Mensik
Petr Mensik

Reputation: 27516

How to center background text of image

The title pretty much says it, I have a image which has a text on it. And I would like to keep it always centered, both horizontally and vertically. Now I am doing it with 

headerText: {
    position: absolute;
    top: 40%;
    left: 5%;
}

but it doesn't seem to work for different resolutions. So is there other way how to achieve this layout?

Link to the website (yellow header is the text I want to center)

Upvotes: 0

Views: 138

Answers (6)

DACrosby
DACrosby

Reputation: 11450

Simple fix for vertically centered.

.headerText{
  position:absolute;
  top:0px;
  line-height:190px;
}

Make sure you modify the height for different resolutions, depending on where the header words wrap - looks pretty bad with massive line-height, wrapped.

Horizontally centered is pretty quick too:

.headerText{
  position:absolute;
  left:0px;
  right:0px;
  text-align:center;
}

All together now:

.headerText{
  position:absolute;
  top:0px;
  left:0px;
  right:0px;
  line-height:190px;
  text-align:center;
}

Upvotes: 0

Martyn0627
Martyn0627

Reputation: 739

An alternative is to add the following CSS to the .headerText style:

width: 100%;
text-align: center;
left: 0;

Hope that helps.

Upvotes: 1

eddipedia
eddipedia

Reputation: 411

First: the colon after headerText should be removed. Second: I assume headerText is a class selector, so you have to prepend a . to headerText

I would recommend to set the image as background-image. Then you can do the following Then:

.headerText {
    background-image: url(path/to/your/image.png)
    background-position: center center;
    background-repeat: no-repeat;
}

But it depends on whether your image has to be part of the page's content or it is design/style only. This solution makes sense only in the latter case.

Upvotes: 0

seanbrodie
seanbrodie

Reputation: 88

That should do it:

headerText: {
    position: absolute;
    top: 40%;
    left: 5%;
    margin: auto;
}

Upvotes: 0

Fabian Lauer
Fabian Lauer

Reputation: 511

Just move the span before the image tags, like so:

<div class="header">
    <span class="headerText">Ubytovna Stavařov Přerov</span>´
    <img src="css/title578145459.png" class="headerImage left">
    <img src="css/title756941752.png" class="headerImage right">            
</div>

and you header text css needs to be

.headerText {
    float: left;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 40%;
    z-index: 1;
    color: yellow;
    font: bolder 6em justus;
    font-style: oblique;
}

That should make it.

Upvotes: 1

mavili
mavili

Reputation: 3424

If you can put the text in a div or span then you can easily align them to be centered. With the dig, all you meed is 

margin: auto

Upvotes: 0

Related Questions