CODEWITHSUNDEEP
htmlcssimage
codehelp
codehelp

Reputation: 11

Image showing two sizes

I am trying to have one image as a background image. The problem is the image is showing up twice, once at it's original size and then again at a larger size which fills the full width of the page. I'm not sure why they are both showing up. I have set the image to not repeat. The image showing at the larger size resizes when I change a value (ex. height 335px to 900px) but the original size image continues to show on top of the image I just mentioned thatenter code here resizes. How can I get the original size image not to show up. This is my CSS:

#banner-contact{
    width: 100%;
    height:100px;
    background-image:url('resized-images-logo/contact-page-resized.jpg');
    background-repeat:no-repeat;
    background-size:cover;
    margin:0px;
} 

with the following html:

    <div id="banner-contact">
        <img src="resized-images-logo/contact-page-resized.jpg">
    </div>

Upvotes: 0

Views: 21

Answers (1)

CodyF
CodyF

Reputation: 5207

Both the img html element and background-image css style result in a shown image. You should be able to remove the img element from the html, and the css style for the div will display your cover image.

Upvotes: 1

Related Questions