CODEWITHSUNDEEP
csshtml
Bhagyesh Chaudhari
Bhagyesh Chaudhari

Reputation: 129

Strech an image in css

i am new in the web development field, so i got stuck at the background itself. i tried stretch this image(img3.jpg) in the html file using which they say isnt supported in HTML5, but i got some weird output and it was a catastrophe, so can you tell me how to get me image to stretch full 100% of the webpage ??

 body {
background: #08121A;    background-image: url('../img3.jpg');
background-repeat: no-repeat;
margin:0;
padding:0;
font-family: 'Source Sans Pro', 'sans-serif';
font-size: 1.1em;
color: #545B64;
font-weight: 300;

}

Upvotes: 1

Views: 76

Answers (4)

Niraj
Niraj

Reputation: 11

body{   
    background: #08121A url("../img3.jpg") no-repeat center center;
    margin:0;
    padding:0;
    font-family: 'Source Sans Pro', 'sans-serif';
    font-size: 1.1em;
    color: #545B64;
    font-weight: 300;
    background-size: 100% 100%;
}
html{
    height: 100%;
}

Upvotes: 0

Jerry Ajay
Jerry Ajay

Reputation: 1094

You are missing the height and widht properties.

 body {
background: #08121A;    background-image: url('../img3.jpg');
background-repeat: no-repeat;
width:100%;
height:auto;
margin:0;
padding:0;
font-family: 'Source Sans Pro', 'sans-serif';
font-size: 1.1em;
color: #545B64;
font-weight: 300;
}

Upvotes: 0

sadegh
sadegh

Reputation: 1642

you can use background-size: cover; like this

body {
    background: #08121A;
    /*-----------------------------*/
    background-image: url('../img3.jpg') no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;
    /*-----------------------------*/
    margin:0;
    padding:0;
    font-family: 'Source Sans Pro', 'sans-serif';
    font-size: 1.1em;
    color: #545B64;
    font-weight: 300;
}

Works in:

Safari 3+
Chrome Whatever+
IE 9+
Opera 10+ (Opera 9.5 supported background-size but not the keywords)
Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

Upvotes: 2

StillLearningGuy
StillLearningGuy

Reputation: 50

you never specified width

width: 100%;

http://www.w3schools.com/cssref/pr_dim_width.asp

Upvotes: 0

Related Questions