CSS/HTML to extent image width to the sides

Question

I have been looking everywhere for an answer but cannot find it anywhere...

What i want to do is: - Extent all the images on my website to the sides of the screen (ie: get rid of the margins)

I have put the below code in CSS:

#bg {
position: fixed; 
top: -50%; 
left: -50%; 
width: 200%; 
height: 200%;
z-index: -100;

And added the below on the HTML side:

<div id="bg">
 <img src="" alt="">
</div>

However this code is to fit a background image to fit the whole screen..

I am a novice at coding, and would much appreciate your help.

Fabien

You need to remove the default margins/padding that the browser stylesheet sets. Take a look [here](http://css-tricks.com/reset-all-margins-padding/). — APAD1, Jul 30 '14 at 02:56
possible duplicate of [How do I force a DIV block to extend to the bottom of a page even if it has no content?](http://stackoverflow.com/questions/147528/how-do-i-force-a-div-block-to-extend-to-the-bottom-of-a-page-even-if-it-has-no-c) — jned29, Jul 30 '14 at 03:30

score 0 · Answer 1 · answered Jul 30 '14 at 02:58

0

fixed position will make the image scroll when you scroll down the page. [just pointing it out]
what are you asking? are you asking how to make the picture fit the entire background?

answered Jul 30 '14 at 02:58

zedlander1000

score 0 · Accepted Answer · answered Jul 30 '14 at 03:23

As you said you want the image to fit the full screen. There is no need to use fixed positioning.

*{
margin:0;padding:0;
}

.container{
width:100%;
height:100%;
}

.container img{
width:100%;
height:100;
}

Just set the width of the container in which the image is contained to a width and height of 100%;
Remove the default padding provided by the browser

2 Answers2