CODEWITHSUNDEEP
htmlcss
Jason W
Jason W

Reputation: 738

HTML and CSS Background issues

I am trying to build a site from scratch, to match a custom look and feel I want; however, I am coming up with some issues related to just starting it out. I am wanting to fill a div element with an image; however, that image is being cut off (I want it to display the whole image with no cropping). Also, I want this to be responsive; so I don't want to use px. When I use percentages though nothing shows. How do I alleviate these two issues I am having?

This is the JSFiddle that I have it working on: JSFiddle

I understand that making it responsive requires percentages or ems; how would I make this responsive? When I change both width and heighth to 100% my image disappears.

Also, why is the width only responsive to a certain point when it is at 100% and height is at 800px?

Thank you

HTML

<body>

    <div id="Banner">
        <div id="Menu">

        </div>

    </div>
</body>

CSS 

#Banner
{
    width: 900px;
    height: 400px;
    background-image: url("../header.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
}

CSS

/* Resets (http://meyerweb.com/eric/tools/css/reset/ | v2.0 | 20110126 | License: none (public domain)) */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}body{-webkit-text-size-adjust:none}

/* Box Model */

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* Container */

body {
    /* min-width: (containers) */
    min-width: 1200px;
}

.container {
    margin-left: auto;
    margin-right: auto;

    /* width: (containers) */
    width: 1200px;
}

Upvotes: 0

Views: 92

Answers (1)

Remy Sheppard
Remy Sheppard

Reputation: 247

Add another 100% on there:

background-size: 100% 100%;

And see how those work for you.

Edited JS Fiddle that shows what you want to achieve.

More on background size

Upvotes: 1

Related Questions