CODEWITHSUNDEEP
htmlcssimage
MyNameIsSwap
MyNameIsSwap

Reputation: 41

How to get my text above my img <div>?

I have been looking around on stackoverflow to find the answer on my problem but I couldn't find it. The problem is that I have a background img where I want to have text on it. But if I use postition: absolute; the text disappears. I also don't want it in my style because I going to use this on different pages with different images.

Visit problem

HTML:

    <body>
        <div id="header">
            <img src="http://www.larsdejonge.nl/werk/img/background.jpg" class="begin">
                <h1>Aangenaam Klassiek</h1>
                <h2>Vormgeving & Frontend</h2>
        </div>
</body>

And my CSS:

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

html, body {
    width: 100%;
    height: 540px;
    background: #efede7;
}

body {
    background: #efede7;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    line-height: 1.3;
}

#header {

}

.begin {
    width: 100%;
    max-height: 540px;

}

h1 {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-size: 3em;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

h2 {
    font-family: 'ProximaNova', sans-serif;
    font-size: 1.5em;
    color: #c7c7c7;
    text-align: center;
}

h2::after {
    content: '';
    width: 80px;
    display: block;
    background: #272f38;
    height: 10px;
    margin: 30px auto;
    text-align: center;
}

I hope someone is smarter than me and could figure this out?

Thanks for already looking into it!

Upvotes: 0

Views: 95

Answers (6)

FlatDesigner
FlatDesigner

Reputation: 43

I see that you don't want the img in your CSS but if you want that I think you need to find it out your self. I don't see the big problem using a url in your CSS ore is it just me?

My solution

You can better use it for the time this now, if you find later something else you can always change it.

HTML Code:

    <body>
        <div id="header">
            <div class="text">
                <h1>Aangenaam Klassiek</h1>
                <h2>Vormgeving & Frontend</h2>
            </div>
        </div>
</body

CCS Code:

#header {
    background-image: url(http://www.larsdejonge.nl/werk/img/background.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 540px;
}
.text {
    padding-top: 150px;
}

h1 {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-size: 3em;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

h2 {
    font-family: 'ProximaNova', sans-serif;
    color: #545454;
    font-size: 1.25em;
    letter-spacing: .06em;
    margin: 0;
    padding: 0 0 2.5em;
    text-align: center;
    text-transform: uppercase;
}

h2::after {
    content: '';
    width: 80px;
    display: block;
    background: #272f38;
    height: 10px;
    margin: 30px auto;
    text-align: center;
}

Upvotes: 0

hungerstar
hungerstar

Reputation: 21675

CSS doesn't prevent you from swapping the image out like you have suggested. I would use a body class.

HTML

<body class="home"><!-- change this class for each page -->
     <div class="intro">
          <p>
               Hello World!
          </p>
     </div>
</body>

Simply change the class on the body tag for each page, i.e. home, about, contact, etc.

CSS

.home .intro {
     background-image: url('path-to-image.jpg');
}
.about .intro {
     background-image: url('path-to-some-other-image.jpg');
}

Here is a demo. Swap the class on the body tag from home to about and click Run to see the difference.

Upvotes: 0

Obsivus
Obsivus

Reputation: 8359

Remove <IMG> and use the img url as background in CCS:

here is an example:

http://jsfiddle.net/act6uasf/5/

Upvotes: 1

Paul
Paul

Reputation: 9022

Remove the header image from your html and use CSS properties instead.

See DEMO which uses this updated CSS snippet:

#header {
background-image: url('http://www.larsdejonge.nl/werk/img/background.jpg');
background-size: auto 540px;
background-repeat: no-repeat;
height: 540px;
}

Background-resize is necessary because your image is way too large.

Upvotes: 2

Littlebobbydroptables
Littlebobbydroptables

Reputation: 3731

If you really want to solve this problem with absolute position, you can use my example

http://jsfiddle.net/act6uasf/2/

here to make absolute property work, you just need to add

position:relative;

to #header, but i recommend you to try solving it with background property.

Upvotes: 0

marian0
marian0

Reputation: 3327

You put your background as image, so it's not just background, but also element with dimension. You should remove your <img /> and put it as background using CSS.

#header {
    background: url('http://www.larsdejonge.nl/werk/img/background.jpg');
}

Upvotes: 2

Related Questions