CODEWITHSUNDEEP
htmlcssbackground
Christian Stewart
Christian Stewart

Reputation: 15519

Scaling Backgrounds in CSS

This isn't exactly about making background images in CSS for a site, so don't mark it as a duplicate just yet.

I need to replicate the following background, but in CSS. I have a variety of gradients implemented on the site but this is more like a darkening around the edges of the screen, and I don't know how to implement this, particularly in CSS. If there's a good way to do this with images please let me know.

Background Example

Thanks!

Upvotes: 1

Views: 5525

Answers (2)

intelis
intelis

Reputation: 8058

If you will be using images, you can try CSS3 background-size:cover

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

You can read more here

Upvotes: 0

antejan
antejan

Reputation: 2624

You can try inset box-shadow http://jsfiddle.net/46JxH/

box-shadow:inset -70px 0 200px -30px rgba(0,0,0,.75);

Or background image with background-size:100% 100%;.

Upvotes: 3

Related Questions