CODEWITHSUNDEEP
htmlcss
cjm
cjm

Reputation: 844

Text won't follow background image

I'm constructing my first site (I've only ever maintained sites or used programs to create them before) from scratch, and I can't seem to get the text to stay on top of the background image without it all going to the left. Here's my HTML:

<html>
    <head>
        <title>Abbey Court Guest House</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="header">
            <p>About Us | Contact Us</p>
        </div>
    </body>
</html>

And here's the CSS that does vaguely what I want it to, but it aligns everything to the left:

.header {
    background-image:url('images/header.jpg');
    background-position: center;
    height: 250px;
    background-repeat: no-repeat;
    color: #73622b;
    width: 1000px;
    text-align: right;
    font-family: "Verdana", "Helvetica", "sans-serif";
}

Removing the width: 1000px; fixes the aligning issue, but pushes the text to the far right.

P.S. header.jpg is 1000px wide and 250px tall.

Any ideas on how to fix this?

Upvotes: 0

Views: 233

Answers (1)

pcarvalho
pcarvalho

Reputation: 290

i don't have enough rep to ask you in comments to clarify what you mean by "stay on top of the background image", so forgive me if i got it wrong.

do you want the p text to be center aligned on the div?

here's a jsfiddle http://jsfiddle.net/LGLKe/1/

Upvotes: 1

Related Questions