• Welcome to The Cave of Dragonflies forums, where the smallest bugs live alongside the strongest dragons.

    Guests are not able to post messages or even read certain areas of the forums. Now, that's boring, don't you think? Registration, on the other hand, is simple, completely free of charge, and does not require you to give out any personal information at all. As soon as you register, you can take part in some of the happy fun things at the forums such as posting messages, voting in polls, sending private messages to people and being told that this is where we drink tea and eat cod.

    Of course I'm not forcing you to do anything if you don't want to, but seriously, what have you got to lose? Five seconds of your life?

Help with this header thingy

kyeugh

kyeugh

onion witch
Pronoun
she/her
So, let's assume I want to use this here picture for the thing I'm about to say.

13hom.png


I want to make it so I can write text over it using HTML/CSS. That is to say, I want to be able to use this banner in several instances throughout my website, but have it say different text on it every time. Is there a kind of stylesheet/attribute etc. that can help me do this?
 
You'd want to use the header as a CSS background image on a regular element that contains the text and ensure that the relevant element is always of the correct size by setting its width and height properties.
 
Are any of these what you want?

Image is in the CSS (everything linked to the stylesheet will have this header):

HTML: 
<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" href="style.css" type="text/css"/>
    </head>

    <body>
        <header>
            <p>Title!!</p>
        </header>

    </body>
</html>

Code: 
/* Header image */
header {
    background-image: url("13hom.png");
    background-repeat: no-repeat;
    width: 511px;
    height: 44px;
}

/*Put the text actually on the header instead of floating away*/
header p {
    padding-top: 12px;
    padding-left: 15px;
}



Image is in the HTML:

HTML: 
<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" href="style.css" type="text/css"/>
    </head>

    <body>
        <header>
            <img src="13hom.png">
            <p>Title</p>
        </header>

    </body>
</html>

Code: 
/*Put the text actually on the header instead of floating away*/
header p {
    margin-top: -35px;
    margin-left: 20px;
}

Instead of those, you could also have it so that in your HTML you have <header id="doduo_header"> on some pages and <header id="lugia_header"> on some other pages, and then the CSS would look like the first CSS example. (Headers that you don't talk about in your html pages would be invisible)

Code: 
/* Header stuff that applies to Doduo and Lugia headers both */
header {
    background-repeat: no-repeat;
    width: 511px;
    height: 44px;
}


/*Put the text actually on the header instead of floating away*/
header p {
    padding-top: 12px;
    padding-left: 15px;
}

/* Stuff for the specific headers */

#doduo_header {
    background-image: url("13hom.png");
}

#lugia_header {
    background-image: url("lugia_header.png");
}

edit: Putting it in a <header> piece in the HTML isn't necessary, just so you know! It could be some other tag.
 
Last edited:
so, let's assume i want to make "header-sub.png" my h2, and "header-main.png" my h1. how would the CSS for that look?
 
Qvalador said:
so, let's assume i want to make "header-sub.png" my h2, and "header-main.png" my h1. how would the CSS for that look?
Click to expand...

Uh, exactly the same thing as h1. Except for h2.

use the CSS Ki gave you and alter the part that says h1 to h2 :p
 
You must log in or register to reply here.
Back
Top Bottom