CODEWITHSUNDEEP
htmlcssimagefooter
user2015705
user2015705

Reputation: 1

CSS Footer Background

I have a problem and I don't know how to fix this. I am making a website and in the bottom of my website I want a sort of a footer image. The image has to be full width and 375px in height. But I really don't know how to do it. I have tried everything in both css and html but it is just not working. Everytime when I put something in html the image is just it's normal size, 375px in height which is good but it is not filling the screen in width. So can anyone please help me? Things I tried: HTML:

<div id="image">
<img src="images/college.jpg/>
</div>

CSS:

#image {
width: 100%;
height: 375px;
}

Please keep in mind that I am new to html and css and I just don't know how to fix this. I tried many things but it's just not working. It's just like a full width footer but it needs to be an image instead of a color. background-image:src('images/college.jpg'); didn't work. Please help me with the html and css. Thanks.

Upvotes: 0

Views: 601

Answers (2)

Talha Akbar
Talha Akbar

Reputation: 10030

#image img {
width: 100%;
height: 375px;
}

Your CSS selector was selecting the parent div of image not the image. That is why it does not fulfill your requirements.

If you want to use background-image property then keep in mind that src is not valid. You have to use url like this in CSS:

#image {
width:100%;
height:375px;
background-image:url('images/college.jpg');
}

And in CSS, you can also assign image or color just by typing background instead of background-image or background-color. e.g.

#image {
width:100%;
height:375px;
background:url('images/college.jpg'); /* background:#fff; */
}

Upvotes: 1

Vishal Anand
Vishal Anand

Reputation: 591

you are targeting the div and not the image here. The image is inside the div and you have to understand that div is just a container to the image. So you might want to target the image. for ex:

img.MyImage{
width:<your width here>;
height:<your height here>;
<!-- dont put <> in actual code -->
}

here your image tag will have the class of MyImage.

Upvotes: 0

Related Questions