CODEWITHSUNDEEP
cssimagebackgroundbackground-image
Matthew Fournier
Matthew Fournier

Reputation: 1155

Cut off an image from the left as window size decreases CSS

So, right now, I have a background image that doesn't scale with the browser size, so, as you shrink the browser window, it cuts off the image on the right and remains anchored on the left. Is there any way I could edit the CSS so the right edge of the image is always on the right edge of the browser, and it cuts off the left as the window shrinks in?

After using a suggestion from below, my CSS currently 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 quite right.

Upvotes: 3

Views: 2869

Answers (1)

mbomb007
mbomb007

Reputation: 4251

Use CSS to change the background-position

background-position: top right;

I tested it here: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position_percent

Change the 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>

Upvotes: 4

Related Questions