Superimposed text

Hi

I’ve done this in the past before I got involved in responsive design… and now I am not sure how to start.

I am playing with the idea of a new header based on an image and some text superimposed. At the moment I got the text (ignore the fonts and actual text) as part of the actual image. The problem is that the image is quite big and in order to reduce its pixel size, the fonts start breaking up.

What I want to try is to separate the image from the fonts and use css to place them on top of the image. But will the text be responsive and stay in place as the screen narrows? Is there a better alternative?

Here is a test page: http://pintotours.net/TEMP1/

Thanks

The best way would be to use a background image on the text’s container.

1 Like

Thank you Sam

Something to keep me busy on a Sunday…

I’m sure that’s the answer.

Thanks

Hi Sam

What did I do wrong?

The image does not show up!

You’ll probably need to post some code or an updated link if you want an answer. @SamA74 is good, but I’m not sure he’s clairvoyant…

1 Like

Sorry…

I am working off-line and it ook me 10 seconds to realize I had not updated the live link…

You were too quick for me!

You need to add the # before your second set of #header rules (or just combine them.

#header{
width:100%;
height:auto;
text-align:center;
margin-top:0;

}

header {
  background: url(http://pintotours.net/TEMP1/NewHeader.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  text-align: center;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1.6em;
  text-shadow: 1px 1px 1px #000;
  padding: 5%;
}
1 Like

Hi there qim,

check out the attachment, it has…

  1. text over the image. :sunglasses:

  2. responsiveness that matches your image. :sunglasses:

index.zip (4.1 KB)

coothead

Hi TechnoBear

Blushes… that’s what happens when you try to do things in a hurry and just copy and paste…

Hi coothead

You’ll be next. Let me sort out what I have now.

Thanks

Hi Sam and TechnoBear

I got it working but…I’ve looked around the Net and it seems that it is not easy to use max-width with background url

I want to limit the width to the width of the #wrapper

I looked at coothead’s post. It is like I had in the past with the advantage of using percentages which may solve the problem

In any case, I would like to know if it is possible to use max-width with Sam’s code.

Thank you

Hi coothead

With your code I end up with the image on the right and not scaled to max-1200px.

I added this to #header

#header {
    position: relative;
display: table;	
  max-width:1200px;
  margin: 0 auto;
 }

#header img{
text-align:center;
margin:0 auto;
}

But it is still too wide and I understand that tables don’t like position:

Why?

I used max-width
…and I’m still here, nothing blew-up.

3 Likes

Ok! Let’s start again

Coothead’s is now http://pintotours.net/TEMP1/index2.html

and your (Sam’s) is the original

http://pintotours.net/TEMP1/

You are missing max-width: 100% on the image.
For me the text gets too small on mobile sizes.
(referring to your version of Coothead’s)

Hi Sam

I am getting utterly confused trying to work out two different codes on the same offline test…

I«m going to stick to yours until I get it sorted out. Then, I will go back yo coothead’s-

I’ve been uploading a mixture of the 2 files; no wonder none work.

I think your code is now at http://pintotours.net/TEMP1/

Why is the image not centered and with a max-width:1200px; ?

but…

The code I posted was an example of a page with a header with a background image.
It was not a working copy of your page.

Yes, I know, but I adjusted your code to my page and can’t get the image centered (although I think I can get round that, in time…) and I want max-width:1200px;

The links to your version of my version, I think it’s the wrong page, it shows something totally different.

Index html

        <h1>Travel Secrets</h1>
 <p>How to get the lowest hotel rates anywhere</p>

Index.css

#header{
width:100%;
height:auto;
text-align:center;
margin-top:0;

}

#header {
  background: url(Dubai.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  max-width:1200px;
  text-align: center;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1.6em;
  text-shadow: 1px 1px 1px #000;
  padding: 5%;
}

#header img{
max-width:1200px;
width:100%;
box-shadow: 0 5px 3px gray;
margin:0 auto;
}


#header h1 {
  color: red
}

#header p {
  color: yellow
}

Please refresh as i have been doing a few changes and added the naked image

This…

#header {
    position: relative;
    display: table;	
    max-width: 1200px;
    margin: 0 auto;
 }

#header img {
    text-align:center;
    margin:0 auto;
 }

…should be…

#header {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
 }

#header img {
    display: block;
    width: 100%;
    height: auto;
 }

coothead

2 Likes