HTML/CSS website formatting

Question

I am coding my first website and ran into a (hopefully) small issue.

I am trying to add text UNDER this img but the second I add the p tag and add my paragraph, its like my website width suddenly goes whack... I'll put my HTML and CSS below. Note I took the p tag out so that you can see what it should look like... The minute I put the p tag in everything becomes a mess.

EDIT: Let me try to explain a bit better what I am trying to do. The first fiddle is my "home" page. When the user clicks the link "Game Preview: Warriors Rams" They are taken to another page which is fiddle number 2. When I attempt to put a paragraph UNDER the Rams Player IMG the website background image seems to zoom in and the "warrior" text on the right side shits outward... The first pic is WITH the paragraph under and the second is without. Sorry for the awful paint editing, the image was too large. Fiddle 1: https://jsfiddle.net/t8fveqdL/1/ Fiddle 2: https://jsfiddle.net/c1hyad70/

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>The Official Website of the Whitewater Warriors</title>
        <link rel="shortcut icon" href="images/WhitewaterWarriorsLogo - Copy.ico">
        <link rel="stylesheet" href="PREVIEW.css"> 
    </head>

    <body>
        <header>
            <img src="images/WhitewaterWarriorsLogo.png" height="150" width="150" alt="Warrior Logo">
            <hgroup>
                <h1> <span class="shadow">The Official Website of the Whitewater Warriors</span> </h1>
            </hgroup>
        </header>
        <nav id="nav_bar">
        <ul>
            <li><a href="index.html" class="current"> Home </a></li>
            <li><a href="speakers.html"> Speakers </a></li>
            <li><a href="luncheons.html"> Luncheons </a></li>
            <li><a href="tickets.html"> Tickets </a></li>
            <li><a href="about.html"> About Us </a></li>
        </ul>
        </nav>
        <section>
        <img src="images/gurley_opbd_main_111115.jpg" alt="Rams Player" width="815px">

        </section>

        <footer>
            <p>
                &copy; 2012, San Joaquin Valley Town Hall, Fresno, CA 93755
            </p>
        </footer>

    </body>
</html>

CSS:

section {
    position: relative;
    width: 815px;
    margin-bottom: 10px;
}

section img {
    position: relative;
    top: -26.5px;
    display: block;
    margin: 0 auto;
}

section p {
    padding: .5em;
}

Under which image do you mean? BTW: the second image has `width="815px"` instead of `width="815"` (without the "px") but that shouldn't be it. It's ok if you don't want/can make a fiddle but at least link to the pictures, I don't want to make my own dummies and the second image lacks a `height`, so I even couldn't if I wanted. — deamentiaemundi, Nov 13 '15 at 03:20
Hey guys thanks for the help... Were talking about the IMG in the section element! What other code do you need/want from my site? Its almost as if my site background img zooms in when I add the paragraph under the section img... — Zach Kaplan, Nov 13 '15 at 03:25
Write a [Fiddle](https://jsfiddle.net/) so that we can see what actually is going on. — Irshad, Nov 13 '15 at 03:38
What background image? Nobody, especially your code talked about a background image! No, really: post the complete HTML including the CSS plus links to the pictures (you can make a fiddle which seems to be the prefered way here for complex problems), we need to be able to repeat your error. — deamentiaemundi, Nov 13 '15 at 03:39
I see no difference with or without a p tag: http://jsfiddle.net/kcy4jfwx/ What background image? You have provided no background image. Is there anything else in your stylesheet besides the 3 css rules you have posted? — chiliNUT, Nov 13 '15 at 03:39
You need to give the full path to the pictures if you did not uploaded them to Fiddle (http://stackoverflow.com/questions/13172762/adding-images-in-jsfiddle). You also need to check the `html` CSS rules. `background-repeat` knows neither `center` nor `fixed`. `fixed` belongs most probably to a former `background-attachment`. And `center`? Where does `center` belong? — deamentiaemundi, Nov 13 '15 at 04:42

Irshad · Answer 1 · 2015-11-13T04:34:47.180

1

You can try adding image as a background image
background: url('images/bg.jpg');

NOTE: Else provide a fiddle for better understanding

Why don't you edit the image using PhotoShop or anything else to have the text in it :P Just saying

edited Nov 13 '15 at 04:34

answered Nov 13 '15 at 03:56

Irshad

222
4
17

No, it's not that. I already have a background img set. I am trying to add text under the IMG in the section without it appearing like its zooming in the background IMG. I know there is no correlation between the two, it just seems to be doing that – Zach Kaplan Nov 13 '15 at 04:01
what background image – chiliNUT Nov 13 '15 at 04:06
@ZachKaplan i think you are looking for something like [this](http://stackoverflow.com/questions/8708945/how-to-position-text-over-an-image-in-css) – Irshad Nov 13 '15 at 04:14

score 1 · Accepted Answer · answered Nov 13 '15 at 04:59

1

The "problem" is in here:

html {
    background-image: url("images/maxresdefault.png"); 
    background-repeat: no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

There are two "issues" there:

A real error in this property:
```
background-repeat: no-repeat center center fixed; 
```
you are setting the values of background-repeat, background-position, and background-attachment in one property (background-repeat) when it should be separated like this:
```
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
```
Not an error but what's causing the problem: the background-size:cover part. You are setting the background to fit the size of the html element, when you add a new paragraph, the size of the document (and the html) changes and the image is resized, which causes the "zooming effect" that you see in the two images that you shared.

answered Nov 13 '15 at 04:59

Alvaro Montoro

28,081
7
57
86

You my friend, just made sitting at my computer all night worth while. Thank you. Is there any way to keep the background image as zoomed out as it was (with the above errors) or am I better off just recreating the background image, fixing the errors and jsut dealing with the image a bit zoomed in? – Zach Kaplan Nov 13 '15 at 05:10
If what you want is to have the team's name always in the same position, you could take it out from the picture (if you created the image) and add it in the HTML like I did in this [JSFiddle](https://jsfiddle.net/c1hyad70/1/) – Alvaro Montoro Nov 13 '15 at 05:11
Scratch that, I'm just going to settle for putting the img into the html. Thanks for your help! – Zach Kaplan Nov 13 '15 at 05:14
The problem that I see is that having the text in the image may become messy. There are many factors that may affect how the picture (and the text inside) is displayed: users seeing the website in portrait or landscape mode, the size of the screen, window resizing... I would go with the text as an independent element from the background image. But that's my opinion, do what is best for you :) – Alvaro Montoro Nov 13 '15 at 05:22

HTML/CSS website formatting

2 Answers2