Crop image to left as window size shrinks CSS
So right now I have a background image that doesn't scale to the size of the browser, so when you shrink the browser window, it crops the image on the right and stays anchored to the left. Is there any way I can edit the CSS so that the right edge of the image is always on the right edge of the browser, and it goes off on the left when the window shrinks?
After using the suggestion below, my CSS looks like this:
.header-container {
background: url(/**/) no-repeat;
width: 100%;
min-width: 1600px;
height: 542px;
background-attachment: fixed;
background-position: top right;
}
Which is closer, but not entirely correct.
source to share
Use CSS to change background-position
background-position: top right;
I tested it here: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position_percent
Change your code to:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('smiley.gif');
background-attachment: fixed;
background-position: top right;
}
</style>
</head>
<body>
</body>
</html>
source to share