Responsive Webdesign – Thank you

[Nocturnes1984]

I 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…

[Paulie_D]

What 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.

[Nocturnes1984]

Hi,

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…

[Paulie_D]

Looks like a background image to me and a positioned header etc.

[Nocturnes1984]

It is a background-image. Could you point me in the right direction on how to make a background-image responsive?

[Paulie_D]

I’m sure you could google it…or even search this site.

[Nocturnes1984]

You 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….

[Nocturnes1984]

Ok, 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;
}

[Nocturnes1984]

Here live:

Here

[__]

Basicly, 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%.

pen

[Nocturnes1984]

Your 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

[__]

Just get rid of the behind-header class and remove the top margin from the article.

[chrisburton]

Is this what he’s looking for? @traq I slightly edited your CSS and HTML.

http://codepen.io/chrisburton/full/szmdi/

[Nocturnes1984]

Almost 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.

[chrisburton]

I’m not seeing that issue.

[Author]

Posts