CODEWITHSUNDEEP
css
user2458123
user2458123

Reputation: 1

Simple CSS background not displaying

I'm working on a simple webdesign assignment and have hit a bump. I'm trying to get a background image to repeat vertically, but there's one small problem: the image isn't showing up. It's in the same directory and the code is, as far as I can tell, (cross-checking it against W3 schools, primarily) correct. I welcome any ideas.

    <html>
    <head>
    <style>
    body
    {
    background-image:url('VerticalTileJPEG.jpg');
    background-repeat:repeat-y;
    }
    </style>
    </head>

    <body>
    <p>Have some text!</p>
    </body>
    </html>

Upvotes: 0

Views: 73

Answers (4)

ralph.m
ralph.m

Reputation: 14345

That will only work if the image file is in the same folder as the page calling it. If it's in an images folder, for example, the path would have to be something like:

background-image:url('images/VerticalTileJPEG.jpg');

If that doesn't help, post some more info. Also make sure to use a doctype.

EDIT: If you are sure that the path to the image is correct, and that the file name is correct (including capitals), then perhaps try a shorthand background declaration:

background:url(images/VerticalTileJPEG.jpg) repeat-x 0 0;

To check that you have the path right, go to your web inspector (e.g. Chrome> [right click] Inspect Element and then click on the image url in the right (CSS) column. You will see right away if the browser is finding the image or not.

Upvotes: 1

user1823761
user1823761

Reputation:

(From comments)

NOX What's the width/height of your image?
YOU It's supposed to be vertically repeating, so the professor had us creating it at 1X1024.

So you must repeat the image on the x-axis:

body {
    background-image: url('VerticalTileJPEG.jpg');
    background-repeat: repeat-x;
}

Some Notes

  • Make sure your file name is exactly VerticalTileJPEG.jpg (case-sensitive).
  • Make sure your HTML file and image, are in the same folder.

Upvotes: 0

Amit
Amit

Reputation: 1

Use Doctype in your page and make sure that the image you want in the background is in the same folder in which u have HTML files or if it is in another folder in that directory than try this code. background-image:url('/foldername/picturename.pictureextension');

for example if the image name is "xyz.jpg" and it is in folder naming "images" then the code will be: background-image:url('/images/xyz.jpg');

Upvotes: 0

I&#39;m Joe Too
I&#39;m Joe Too

Reputation: 5840

You are telling it to repeat up and down (vertically along the y axis), but your body is only 1 paragraph tall which (I presume) is not tall enough to show the image more than once.

To repeat it vertically, you need more content down the page or set your background on the html element not the body.

To repeat it horizontally, repeat-x.

Upvotes: 0

Related Questions