CODEWITHSUNDEEP
htmlbackground-image
Jack Davis
Jack Davis

Reputation: 71

HTML Background Image & Repeat


I'm trying to design a website (for practice) with HTML and CSS styling. I'm having an issue with a background texture that I want to be repeated in the website. The code for the HTML and the CSS are below. 

<html>
<head>
    <title>My Blog</title>
    <link rel="stylesheet" type="text/css" href="css/960_12_col.css" />
    <link rel="stylesheet" type="text/css" href="css/home.css" />
</head>
<body>
   <!-- HTML code for Header -->
   <div class="header">
     <div class="container-12">
        <div class="grid_5">
            <h1>BLOG NAME</h1>
        </div>
     </div>
   </div>
<!-- END OF HTML code for Header -->

<!-- HTML code for Main Wrapper -->

<div class="wrapper">

    <!-- HTML code for Main Feature -->
    <div class="main-page container-12">
        <h3>Main Feature Content</h3>
    </div>
    <!-- END OF HTML code for Main Feature -->

<div class="more-features container-12">
    <h2 class="grid-12"></h2>

    <div class="grid-3">
        <h4>Column One</h4>
    </div>

    <div class="grid-3">
        <h4>Column Two</h4>
    </div>

    <div class="grid-3">
        <h4>Column Three</h4>
    </div>

    <div class="grid-3">
        <h4>Column Four</h4>
    </div>
</div>

<!-- END OF HTML code for Main Wrapper -->
</div>

<!-- HTML CODE for Footer -->
<div class="footer clearfix">
    <div class="container-12">
        <p>Footer Information</p>
    </div>
</div>
<!-- END OF HTML CODE for Footer>

</body>
</html>

I am using the 960.gs grid system, for which currently I have no issue with. I have linked a CSS file to the 960.gs CSS file above, which works fine.

This is the HOME.CSS file. 

body {
background-image:url('images/bg.jpg');
background-repeat:repeat;
}

So far, this is the point that I have got to with my code. Theoretically, I'm sure the background should appear before CSS styling the rest of the webpage, unless I am totally incorrect - which I may be. I'm just trying to learn the language so do please understand if I have made a drastic error or may have forgotten a part of the code.

The image I want to get is in the folder 'image' and then it is called bg.jpg - which I have linked in my home.css file. This stylesheet works fine, but the image isn't appearing. The webpage is simply appearing white.

Can someone help please? Thanks, Jack.

Upvotes: 0

Views: 185

Answers (1)

Mark
Mark

Reputation: 4873

This is to do with your directory structure then. Depending on your struture, you may want to try something like ../images/bg.jpg

body {
background-image:url('../images/bg.jpg');
background-repeat:repeat;
}

Becuase your referencing the images foldder from the css folder, you need to move up a level in the directory to access the images folder. That is what the "..." will do.

Upvotes: 3

Related Questions