0

I'm doing a webpage, with a background image, the site appears fine when it's in full page mode. But when I start re-sizing the browser, the navigation stays the same, but the background-image, becomes too small and there is unwanted white space. What can I do so that background-image conforms to the size of the browser when re-sized? Thank you all that help. :)

<html>
<link rel="stylesheet" type="text/css" href="C:\Users\tom\Desktop\CSS\Mark & Howie Wedding/itinary.css">
<meta name="viewport" content="width=device-width">
    <head>
        <body>
            <div class="wrapper">
                <ul class="nav">
                    <li class="home"><a href="#">Home</a></li>
                    <li class="location"><a href="#">Location</a></li>
                    <li class="itinerary"><a href="#">Itinerary</a></li>
                    <li class="photos"><a href="#">Howie & Mark</a></li>
                </ul>
            </div>
        <div class="card">
            <div class="sign">
                <ul class="mark">
                    <li>Howard & Mark's wedding beings</li><br>
                    <li>We start dancing</li><br>
                    <li>Everybody has fun</li>
                </ul>
            </div>
        </div>
        </body>
    </head>
</html>

body {
background-image: url("http://i.istockimg.com/file_thumbview_approve/20453608/2/stock-photo-20453608-wedding-sign.jpg");
background-repeat: no-repeat;);
background-repeat: no-repeat;
background-size: cover;
}
.wrapper {
    top: 10px;
    height: 175px;
    width: 1100px;  
    background-color: black;
    opacity: 0.8;
    margin: auto;
    border-radius: 10px;
    z-index: 0;

}
.card {
    display: inline-block;
    width: 700px;
    height: 350px;
    margin: 40px;
    background-color: white;
    border-radius: 20px;
    text-align: center;
}
.sign {
    margin: 35px;
    width: 617px;
    height: 267px;
    border: solid black;
    border-radius: 5px;
    font-style: oblique;
    font-weight: 600;
    text-align: center;
}
.mark {
    font-size: 35px;
    list-style-type: none;
}
ul.nav {
    display: inline;
    color: white;
    text-decoration: none;
    text-align: center;
    padding: 8px 15px;
    border-radius: 5px;
    text-align: auto;
}
ul.nav li {
    float: left;
    margin-left: 50px;
}

ul.nav li.home {
    padding: 35px 15px;
    margin: 20px;
    top: 15px;
    font-weight: 100;
    height: 55px;
    width: 130px;
    font-size: 40px;
}
ul.nav li.home:hover {
        background-color: #138f00;
        border-radius: 8px;
}
ul.nav li.location {
    padding: 35px 15px;
    margin: 20px;
    font-weight: 100;
    top: 15px;
    height: 55px;
    width: 180px;
    border-radius: 5px;
    font-size: 40px;

}
ul.nav li.location:hover {
    background-color: #138f00;
    border-radius: 8px;
}
ul.nav li.itinerary {
    padding: 35px 15px;
    margin: 20px;
    font-weight: 100;
    height: 55px;
    width: 200px;
    border-radius: 5px;
    font-size: 40px;
}
ul.nav li.itinerary:hover {
    background-color: #138f00;
    border-radius: 8px;
}
ul.nav li.photos {
    padding: 35px 15px;
    margin: 20px;
    margin-left: 40px;
    font-weight: 120;
    height: 55px;
    width: 250px;
    border-radius: 5px;
    font-size: 40px;
}
ul.nav li.photos:hover {
    background-color: #138f00;
    border-radius: 8px;
}
ul.nav li a {
    color: #faf3bc;
    display: block;
    text-decoration: none;
}
Alan
  • 17
  • 5
  • I think what's throwing it off might be the nav size, when I use % instead of px the photos section jumps off the wrapper div. :s – Alan Aug 04 '14 at 17:21

3 Answers3

1

Add:

html, body{
  height:100%;
}

You should also removed the duplicate css element: background-repeat: no-repeat;);

Here's a working example: http://jsfiddle.net/LKrhJ/1/

Jared Dunham
  • 1,467
  • 2
  • 17
  • 29
  • hmm interesting idea. But i'm simply trying to make it so that background-image re-sizes. – Alan Aug 04 '14 at 17:24
  • If I understand you correctly, and you don't mind distorting the image, use this: `background-size: 100% 100%;` [example](http://jsfiddle.net/LKrhJ/2/) – Jared Dunham Aug 04 '14 at 17:39
  • I keep running into the issue of the image repeating. But I have to keep that idea in mind for the next time. I'm trying to figure how to re-size the wrapper div, since that might work a bit better. Any clue as how that can be done, cause I'm stumped. :( – Alan Aug 04 '14 at 18:21
  • If you really want it to re-size, you should start using percentages. It sounds like you also want to make it mobile (and tablet) friendly. If so, you really have to program the website with mobile first, tablet and then desktop. [Here](http://webdesign.tutsplus.com/articles/a-simple-responsive-mobile-first-navigation--webdesign-6074) is a good article to get you started. – Jared Dunham Aug 04 '14 at 19:03
0

Don't know for Css is so unpredictable sometime but how about this? Maybe like put image in a div and put unique class on the image and set that class to this:

#img.source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}

OR 
.uniqueClass{
width: 100%;
position: absolute;
top: 0;
left: 0;

}

Reference - http://css-tricks.com/how-to-resizeable-background-image/

Rika
  • 768
  • 1
  • 5
  • 16
0

Try this code:

And keep in mind that yours <HEAD> tag is in the wrong place, it must be before <BODY> ones.

If you prefer just use the CSS in a diferent file, with that <LINK> tag.

<html>
    <head>
<link rel="stylesheet" type="text/css" href="C:\Users\tom\Desktop\CSS\Mark & Howie Wedding/itinary.css">
<meta name="viewport" content="width=device-width">

    <style>
        img.bg {
        /* Set rules to fill background */
        min-height: 100%;
        min-width: 253px;

        /* Set up proportionate scaling */
        width: 100%;
        height: auto;

        /* Set up positioning */
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1; // set it behind other stuffs
    }

.wrapper {
    top: 10px;
    height: 175px;
    width: 1100px;  
    background-color: black;
    opacity: 0.8;
    margin: auto;
    border-radius: 10px;
    z-index: 0;

}
.card {
    display: inline-block;
    width: 700px;
    height: 350px;
    margin: 40px;
    background-color: white;
    border-radius: 20px;
    text-align: center;
}
.sign {
    margin: 35px;
    width: 617px;
    height: 267px;
    border: solid black;
    border-radius: 5px;
    font-style: oblique;
    font-weight: 600;
    text-align: center;
}
.mark {
    font-size: 35px;
    list-style-type: none;
}
ul.nav {
    display: inline;
    color: white;
    text-decoration: none;
    text-align: center;
    padding: 8px 15px;
    border-radius: 5px;
    text-align: auto;
}
ul.nav li {
    float: left;
    margin-left: 50px;
}

ul.nav li.home {
    padding: 35px 15px;
    margin: 20px;
    top: 15px;
    font-weight: 100;
    height: 55px;
    width: 130px;
    font-size: 40px;
}
ul.nav li.home:hover {
        background-color: #138f00;
        border-radius: 8px;
}
ul.nav li.location {
    padding: 35px 15px;
    margin: 20px;
    font-weight: 100;
    top: 15px;
    height: 55px;
    width: 180px;
    border-radius: 5px;
    font-size: 40px;

}
ul.nav li.location:hover {
    background-color: #138f00;
    border-radius: 8px;
}
ul.nav li.itinerary {
    padding: 35px 15px;
    margin: 20px;
    font-weight: 100;
    height: 55px;
    width: 200px;
    border-radius: 5px;
    font-size: 40px;
}
ul.nav li.itinerary:hover {
    background-color: #138f00;
    border-radius: 8px;
}
ul.nav li.photos {
    padding: 35px 15px;
    margin: 20px;
    margin-left: 40px;
    font-weight: 120;
    height: 55px;
    width: 250px;
    border-radius: 5px;
    font-size: 40px;
}
ul.nav li.photos:hover {
    background-color: #138f00;
    border-radius: 8px;
}
ul.nav li a {
    color: #faf3bc;
    display: block;
    text-decoration: none;
}
    </style>
        </head>
        <body>
        <img src="http://i.istockimg.com/file_thumbview_approve/20453608/2/stock-photo-20453608-wedding-sign.jpg" class="bg" />
            <div class="wrapper">
                <ul class="nav">
                    <li class="home"><a href="#">Home</a></li>
                    <li class="location"><a href="#">Location</a></li>
                    <li class="itinerary"><a href="#">Itinerary</a></li>
                    <li class="photos"><a href="#">Howie & Mark</a></li>
                </ul>
            </div>
        <div class="card">
            <div class="sign">
                <ul class="mark">
                    <li>Howard & Mark's wedding beings</li><br>
                    <li>We start dancing</li><br>
                    <li>Everybody has fun</li>
                </ul>
            </div>
        </div>
        </body>

</html>
brunoroc
  • 21
  • 6
  • Your code does give me an idea. Would you how I would be able to navigation re-size when I change the size of the browser viewport? – Alan Aug 04 '14 at 17:51
  • 1
    To be honest, i would recommend bootstrap for you. It's easy to use and simple. It is also full responsive. Just try to download a software called Pingendo, it uses Bootstrap3 and WYISWYG, so is just drag and drop the elements. But considering that you already made this design, and to help you with do not do it all again from 0. Please take a look at this simple and easy developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag link if you have any doubts about this link orientations just let me know. – brunoroc Aug 04 '14 at 18:24
  • Also after doing this, you can just test you site on mutiple devices on this tool: http://www.browserstack.com/ but, please, keep in mind that you have to upload your page to any host. If you are usuing only HTML, you can test your code here, before uploading it: http://www.jmarshall.com/easy/html/testbed.html. – brunoroc Aug 04 '14 at 18:27
  • I never used bootstrap. So I'm pretty sure I would muck it up. :( Would media query be any help with it? – Alan Aug 04 '14 at 18:40
  • Brow i'm not sure. You might take this decision for your own. I've created this fiddle (http://jsfiddle.net/wQ7w7/) [this fiddle shows what is Media Query and how it works] to helping you in your decision. In mine opinion this is not the answer to yours trouble. But it might help with future troubles, who knows. Right now i think that the mozilla page (Viewport_meta_tag) is what you are looking for! – brunoroc Aug 04 '14 at 19:57