How to scale an background image to desired scale, can't scale it

user_13113557 0
Viewed 69

So i have a problem. Im working on a site for my homework using html,css. Now i want the header to has height 700px, width 100%. Now i want an image (thats pretty big has for sure more than 2000px height). to be my background image for my header.

now i have this code:

header{width:100%;
background-image:url("url");
background-repeat:no-repeat;
background-position:top;
background-size:cover;
height:700px}

Now i want to scale the image how i want to, like i could for example make the whole image fit in those 700px height and whole widght, for example using this?:

background-size: 100% 700px;

but i don't want it too like that stretch so i want to maybe dont fit the whole image but maybe cut some pixels downside of my image so it doesn't look that much stretch.

I hope u could understand what i want to achieve sorry for my english.

Now how the code would look like and how can i achieve this? espescially when i have to use

background-position:top;
background-size:cover;

(task)

Thanks for reading!

scaling background-image css image html
2 Answers

If you need to use background-size:cover; for your exercise then this is your scaling. This will look at the aspect-ratio of your element and the image. It will then always scale to 100% for side that will make sure that it keeps it's aspect-ratio (else it would stretch the image).

So if its in a wide screen it will probably scale to a width of 100% and then cut pixels from the bottom. But if you resize your browser to a very small size then it probablly will resize to a 100% of the height and will cut of pixels from the side (because it will cover the whole area but won't stretch to fit it)

user_179070840 
header{
width:100%;
background-image:url("url");
background-repeat:no-repeat;
background-position:center;
background-size:cover;
height:700px
}

This is the best code to fit an image witch is not the samee aspect ratio.

You should take care. Coding not resolve of your problems when images come in. You need a picture that fits on screen size and aspect ratio of every device. On desktop you have a different aspect ratio than a mobile. To be sure the image will be perfect you should resize a specific image in Photoshop or other program first and after that to insert on your website. Also in css you can put different background images on different resolutions with @media.

user_152272460
Related