qim
May 29, 2016, 12:08pm
1
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
SamA74
May 29, 2016, 12:28pm
2
The best way would be to use a background image on the text’s container.
1 Like
qim
May 29, 2016, 12:36pm
3
Thank you Sam
Something to keep me busy on a Sunday…
I’m sure that’s the answer.
Thanks
qim
May 29, 2016, 12:47pm
4
Hi Sam
What did I do wrong?
The image does not show up!
qim:
What did I do wrong?
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
qim
May 29, 2016, 12:51pm
6
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…
text over the image.
responsiveness that matches your image.
index.zip (4.1 KB)
coothead
qim
May 29, 2016, 1:26pm
9
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
qim
May 29, 2016, 1:38pm
10
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
qim
May 29, 2016, 1:52pm
11
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:
SamA74
May 29, 2016, 1:53pm
12
Why?
I used max-width
…
…and I’m still here, nothing blew-up.
3 Likes
qim
May 29, 2016, 1:57pm
13
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/
SamA74
May 29, 2016, 1:59pm
14
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)
qim
May 29, 2016, 2:06pm
15
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…
image, fluid, css
SamA74
May 29, 2016, 2:09pm
16
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.
qim
May 29, 2016, 2:11pm
17
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;
SamA74
May 29, 2016, 2:14pm
18
The links to your version of my version, I think it’s the wrong page, it shows something totally different.
qim
May 29, 2016, 2:18pm
19
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