I know this is a really old thread, but it shows up at the top in Google, so here’s another option. This one is pure CSS, and doesn’t require any extra HTML. box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2); There are a surprising number of uses for the box-shadow feature.
CSS3 allows this sort of thing and it looks like this: body { background-image: url(images/bgtop.png), url(images/bg.png); background-repeat: repeat-x, repeat; } The current versions of all the major browsers now support it, however if you need to support IE8 or below, then the best way you can work around it is to have extra divs: <body> … Read more
You could use a combination of both methods eg. .crop { width: 200px; height: 150px; overflow: hidden; } .crop img { width: 400px; height: 300px; margin: -75px 0 0 -100px; } <div class=”crop”> <img src=”https://i.stack.imgur.com/wPh0S.jpg” alt=”Donald Duck”> </div> You can use negative margin to move the image around within the <div/>.
You can achieve this with the background-size property, which is now supported by most browsers. To scale the background image to fit inside the div: background-size: contain; To scale the background image to cover the whole div: background-size: cover; JSFiddle example There also exists a filter for IE 5.5+ support, as well as vendor prefixes … Read more
It’s not a good idea when you want your images and style information to be cached separately. Also if you encode a large image or a significant number of images in to your css file it will take the browser longer to download the file leaving your site without any of the style information until … Read more
Check out this pen. You will have to use two different containers, one for the background image and the other for your content. In the example, I have created two containers, .background-image and .content. Both of them are placed with position: fixed and left: 0; right: 0;. The difference in displaying them comes from the … Read more
Proper uses of IMG Use IMG if you intend to have people print your page and you want the image to be included by default. —JayTee Use IMG (with alt text) when the image has an important semantic meaning, such as a warning icon. This ensures that the meaning of the image can be communicated … Read more
Multiple backgrounds! body { background: #eb01a5; background-image: url(“IMAGE_URL”); /* fallback */ background-image: url(“IMAGE_URL”), linear-gradient(#eb01a5, #d13531); /* W3C */ } These 2 lines are the fallback for any browser that doesn’t do gradients. See notes for stacking images only IE < 9 below. Line 1 sets a flat background color. Line 2 sets the background image … Read more