- This topic is empty.
-
AuthorPosts
-
September 18, 2014 at 1:03 am #183447
Nocturnes1984
ParticipantI asked this before yet nobody responded. Most likely i didn’t ask my question in a decent way.
What I am trying to do is make a responsive header with text on top. Thats basicly it…
The only thing that is confusing me is:
Should i use something like this:
< header >
< img src = ” # ” alt=” ” / >
</ header>or
.banner{
background-image:url(……);
height:300px;
width:100%;
}So my question is: What is best…if i pick the 2nd option if have to set a fixed height, otherwise nothing will show up…
2nd question, i’ve been looking to center text horizontaly & verticaly on top of this image.
Just to note: I’m not looking for a full-scale background. Only a header with text on it that scales responsive. I’ve tried many things and Google isn’t helping me out…I’ve been cruising from site to site giving me solutions from software to do it for me (Totaly not an option for me) to Javascript (No thank you for now)
Why is something this easy so hard to pull of…Era 2014…
September 18, 2014 at 1:11 am #183449Paulie_D
MemberWhat is best
There is no one-size-fits-all ‘best’…whatever works for your site is best.
Use one or the other depending on how you want the site to look / act.
BTW…Background images can scale…using
background-size
.September 18, 2014 at 1:15 am #183450Nocturnes1984
ParticipantHi,
Thx Pauli for your reply!
What works best…i just don’t know the trend of what most people use?
Basicly, This is what i’m trying to get. That is a simple header with simple text on top of it…
September 18, 2014 at 6:10 am #183464Paulie_D
MemberLooks like a background image to me and a positioned header etc.
September 18, 2014 at 6:12 am #183466Nocturnes1984
ParticipantIt is a background-image. Could you point me in the right direction on how to make a background-image responsive?
September 18, 2014 at 6:16 am #183470Paulie_D
MemberI’m sure you could google it…or even search this site.
September 18, 2014 at 6:24 am #183472Nocturnes1984
ParticipantYou would think hu…every link on Google is purple…I looked for everything.
All i’m looking for is a responsive header lol…am i making things that complicated? :D It has to be full width:100%, height should be automatic…
The web gives me solutions from Jquery to ….
I’m looking for a simple CSS3 solution….
September 18, 2014 at 6:48 am #183474Nocturnes1984
ParticipantOk, so this is my problem – It works but i want to get that “height” gone out of my css…
HTML>
<div class="container"> <div id="page_title"> </div> </div>
CSS>
.container{ width:100%; max-width:1300px; margin:0 auto; } #page_title{ background-image:url(../images/background.jpg); background-size:100%; background-repeat:no-repeat; height:265px; }
September 18, 2014 at 7:05 am #183475Nocturnes1984
ParticipantHere live:
September 18, 2014 at 10:32 am #183487__
ParticipantBasicly, This is what i’m trying to get.
Do you mean the picture of the tricycle? That’s not actually a part of their header. The header is just the site title and navigation (it’s the part that turns pink when you scroll down). The photo is part of the main page, in a fixed position behind the header.
In any case, if you want the photo to scale proportionally, the easiest approach would be to use an actual
img
element and just set the width to 100%.September 18, 2014 at 11:14 pm #183560Nocturnes1984
ParticipantYour getting close, but i must of explained it the wrong way. Your method does the job but I don’t need my image to be fixed beneath the content. It must go up while i scroll up. Only thing i need is for it to be responsive with text on top of it. Thats about it :D
September 19, 2014 at 1:15 am #183569__
ParticipantJust get rid of the
behind-header
class and remove the top margin from the article.September 19, 2014 at 2:36 am #183570chrisburton
ParticipantIs this what he’s looking for? @traq I slightly edited your CSS and HTML.
September 19, 2014 at 3:03 am #183572Nocturnes1984
ParticipantAlmost there….
http://codepen.io/Nocturnes/pen/bCjDc
This is what i have…but look at what the text does when you minimize the browser. Text goes outside the image. (I know, its positioned absolute, but i see most people do it this way) Am I doing something stupid?
Only thing i want now is to position the text horizontaly & verticaly…always, whatever the size of the browser is.
September 19, 2014 at 3:06 am #183574chrisburton
ParticipantI’m not seeing that issue.
-
AuthorPosts
- The forum ‘Other’ is closed to new topics and replies.