Member Avatar for sirlink99

I have a background image placed onto my website using css

body {
    background-image: url(../Images/bg2.png);
    background-repeat:no-repeat;
    background-position: center bottom;
    background-size: 100% 100px;
}

and I was wondering how I could make it so that if the website is smaller than the browser window then the image sticks to the bottom of the browser, however it it is larger, then it moves to the bottom of the website. Currently I have the code that makes it so with the bottom of the website, however if the site is small (not much information on the page), then the background has white underneath the image. If I have the one where it moves with the browser (with the fixed attachment) then it will follow the screen which is not what I would like because it would be an annoyance when the user is trying to read the text. How would I be able to accomplish this task?

Thank you for your time.

Edited by sirlink99
  • 2 Contributors
  • 3 Replies
  • 127 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by LastMitch
Member Avatar for sirlink99

a quick look through the websites did not seem to touch on my problem. my problem is exactly this one, however when I tried to appy this code to mine it would not work.

Here is my full code

<!doctype html>
<html>
    <head>
        <title>Home</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <div class="container">
            <div class="header">
            </div>
            <div class="menuBar">
                <div class="buttonRB"><a href="index.html">Home</a></div>
                <div class="buttonRB"><a href="projects.html">Projects</a></div>
                <div class="buttonRB"><a href="about.html">About</a></div>
                <div class="buttonRB"><a href="contact.html">Contact</a></div>
            </div>
            <div class="content">
                <h1>Hello World!</h1>

            </div>
            <div class="footer">

            </div>
        </div>
    </body>
</html>

and the css

.container {
    width: 90%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10%;
    padding: 0px;
}

.header {
    background-image: url(../Images/header.png);
    width: 100%;
    height: auto;
    padding: 0px;
    border: 0px;
    margin: 0px;
}

.header img {
    font-family: arial;

}

body {
    background-image: url(../Images/bg2.png);
    background-repeat:no-repeat;
    background-position: center bottom;
    background-size: 100% 100px;
}

.menuBar {
    width: 100%;
    height: 25px;
    border: 1px;
    background-image: url(../Images/bg2.png);
    background-size: 100% 25px;
    background-repeat: repeat-x;
    font-size: 15px;
    font-family: verdana;
    line-height: 22px;
    font-weight: bold;
    border: 1px solid #888888;
    margin: 0px;
}

.buttonRB a{
    color: #686868;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    width: 12.5%;
    min-width: 100px;
    height: 25px;
    border-right: 1px solid #888888;
    float: left;
}

.button a {
    color: black;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    width: 150px;
    height: 25px;
    float: left;
}

.buttonRB a:hover {
    color: #3399FF;
}

.content {
    width: 100%;
    height: auto;
    margin: 0px;
    border-left: 1px solid #888888;
    border-right: 1px solid #888888;
    padding-top: 5px;
    padding-bottom: 5px;
}

.content p, h1, h2, h3, h4, h5, h6 {
    padding-left: 20px;
    padding-right: 20px;
}

.footer {
    width: 100%;
    height: 25px;
    border: 1px;
    color: #686868;
    background-image: url(../Images/bg2.png);
    background-size: 100% 25px;
    background-repeat: repeat-x;
    font-size: 10px;
    font-family: verdana;
    line-height: 6px;
    text-align: center;
    border: 1px solid #888888;
    margin: 0px;
}

if the layout I privided is too general. As I said I attemped the code, as well as both the scrolling and the fixed attachment, but none of them seemed to work.

Thanks for the help.

Member Avatar for LastMitch

a quick look through the websites did not seem to touch on my problem. my problem is exactly this one, however when I tried to appy this code to mine it would not work.

The link you provided has nothing to do with the background image you trying to explain. The link you provided is about a footer sticky that stays on the bottom not about a background image.

Since you want a image stick on the bottom on the footer.

Try this link:

http://www.cssstickyfooter.com/using-sticky-footer-code.html

It's a simple CSS code and it's easy to follow.

From the link there's a code for the footer:

#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
background-image: url(../Images/bg2.png);
background-size:80px 60px;
background-repeat:no-repeat;
}
Edited by LastMitch because: grammer
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.