CODEWITHSUNDEEP
javascripthtmlcss
Chris
Chris

Reputation: 961

How to shave off parts of image based on window size

I have an image, see below:

http://bookyoursite.com/images/bysheaderpic.png

The Image is a page banner with the title of the page starting around the middle of the picture.

What I have currently is

#banner {
    background-image:url('/images/bysheaderpic.png');
    background-repeat:no-repeat;
    background-position:right bottom;
    height:191px;
    max-width:1080px;
    min-width:550px;
    width:80%;
}

What happens is that when the window is resized, the image is shaved off of the right, and cuts off the first part of the title. If I use

background-position:center bottom;

it cuts off of both sides equally, resulting in the .com being cut off.

What I need is the image to shrink (when the window is resized) such that the title of the page remains visible. To do this, the background needs to be "attached" around the 2/3 mark to the middle of the container

I've played with the background-attachment and background-position attributes to no avail. Is there a way to do this without using javascript?

Upvotes: 0

Views: 154

Answers (2)

Daniel Forbes
Daniel Forbes

Reputation: 624

Have you consider a css maskand some width and max-width with percentage

something like:

-webkit-mask-image: url(image.jpg);

Upvotes: 1

antyrat
antyrat

Reputation: 27765

You can try to use:

background-size: cover;

Read more about background-size property at MDN.

Also you can do this by making your image 100% width and height and insert it inside your container.

HTML:

<div id="banner">
    <img src="http://bookyoursite.com/images/bysheaderpic.png" width="100%" height="100%">
</div>

CSS:

#banner {
    height:191px;
    max-width:1080px;
    min-width:550px;
    width:80%;
}

Upvotes: 1

Related Questions