image stretch to the width of the screen

[jasonhough]

Hi there,

I have an jpeg which I want to make into a footer on a website. I am using asp.net master page for this.
I cannot seem to get it the width of the internet explorer/firefox etc screen. So I need to stretch it – but it won’t be so much that its blurred.
I also need it really to stay at the bottom of the screen.
I am a CSS newbie, my site is in html5 and css3.
Any ideas ?

Thanks

Jason

[Paulie_D]

If you are scaling up an image that is smaller than the screen then it will be ‘blurred’. There isn’t much you can do about that.

It’s hard to help further without actually seeing a live link or something in Codepen with an actual image.

[jasonhough]

Hey, thanks for the reply.
http://doozey.azurewebsites.net/content/default.aspx

this is the website, at its basic

As you can see, there is a header and a footer
This has been written in asp.net.
So the footer needs to be the width of the screen – if need be I can make it larger in photoshop (not a problem), but it doesn’t need to be stretched that far as you can see.
Also I am concerned about everyones screen sizes – how can i make this work ?
The footer on this website css-tricks.com is perfect, i need the same.
Any ideas ?

thanks

Jason

[Paulie_D]

To be honest, from what I can see that image needs, in fact, to be two separate images (flags & UK)…the darker section can be done with CSS.

The image shouldn’t really be in the HTML as it’s not content but rather should be a bg image.

http://codepen.io/anon/pen/Lkoqu

If you change the height of the header you can see that the image will be clipped so that’s another issue.

It’s much easier to scale a large image down rather than the other way.

[Author]

Posts