CODEWITHSUNDEEP
htmlcss
Ave Maleficum
Ave Maleficum

Reputation: 117

Improper showing of picture in CSS

Here is the thing, this is the CSS code for the image in h1

h1 { background-color: #000033; 
 background-image: url(sunset.jpg); 
 background-position: right; 
 background-repeat: no-repeat; 
 padding-left: 20px; 
 height: 72px; 
 color: #FFFFFF; 
 font-family: Georgia, serif; 
 line-height: 200%; 
 margin-bottom: 0; }

I am using the same picture sunset.jpg, but my code is 

h1{
    background-image:url(images/sunset.jpg);
    background-position: right; 
    background-repeat:no-repeat;
    height:72px; 
    padding-left:20px;
    color: #FFFFFF; 
    margin-bottom:0;
    background-size:100% 100%;
    line-height: 200%; 
}

I have to use this code

background-size:100% 100%;

I just can't understand, why in the first CSS code, it does not use background-size:100% 100%;and still get a perfect h1?

Upvotes: 0

Views: 54

Answers (1)

emerson.marini
emerson.marini

Reputation: 9348

Like I mentioned in the comments, the idea used on that link is to have a background-color that would blend to the image giving you the impression that's actually a wider image.

When you tried to reproduce the styles, you missed this bit, and got it solved by adding the background-size, which doesn't give you the same final result (it's actually stretching the image to fill the container).

That's the original CSS:

h1 {
    /* Removed the property below so you see what's missing in your styles */
    /*background-color: #000033;*/
    background-image: url(http://jtcollin.com/chapter4/pacific4/sunset.jpg);
    background-position: right;
    background-repeat: no-repeat;
    padding-left: 20px;
    height: 72px;
    color: #FFFFFF;
    font-family: Georgia, serif;
    line-height: 200%;
    margin-bottom: 0;
}

Demo

Your CSS:

h1 {
    background-image: url(http://jtcollin.com/chapter4/pacific4/sunset.jpg);
    background-position: right;
    background-repeat: no-repeat;
    padding-left: 20px;
    height: 72px;
    color: #FFFFFF;
    font-family: Georgia, serif;
    line-height: 200%;
    margin-bottom: 0;
    background-size:100% 100%;
}

Demo

Upvotes: 1

Related Questions