How to change image's resolution so that it is clear in the size that we want in HTML/CSS?

How to change image's resolution so that it is clear in the size that we want in HTML/CSS?
0.0 0

#1
.body{ background-image=url(http://www.ishafoundation.org/us/blog/wp-content/uploads/2015/06/sunrise-2.jpg); }

#2

Not sure if I understand what you mean by this title. btw syntax for CSS is:

.body{
background-image: url(http://www.ishafoundation.org/us/blog/wp-content/uploads/2015/06/sunrise-2.jpg);
}

maybe try to read something about it here


#3

Humpty Dumpty do

Okay, so I’m not good at english tooo :open_mouth: well, then I’ll just assume you were asking about resizing your image according to your ???

Okay, anyways, let me throw it all in.

Let’s take a look at few samples before we eat the meat okay?

element{
    property : value;
    property0 : value;
    property1 : value;
    ...
    ..
    .
}

Hmm Seems legit? Okay, let’s do that again, but with real stuff, I’ve see the author of this question use the class body, and property background-image and then the value url. Gasp

Right, let’s do that here now (OMG MY BROTHER MADE ME SPICY NOODLES WUT THA!) :yum:

.body{
    background-image : url(*culprit's address goes here!*) /* I hope agent browser has enough resources */
}

Ugh, I ended up not eating it :3

Now, now, n-now let’s look at your code, I’m lazy as tortoise, let’s get this done via copy-pasta friend :slight_smile:

.body{
background-image=url(http://www.ishafoundation.org/us/blog/wp-content/uploads/2015/06/sunrise-2.jpg);
}

SPOT THE DIFFERENCE YET?!
Oh, wait, nvm, you can’t yet find them… url('url');
OhhH! There it goes, that little bastard! and look! there’s the “=” sign you shouldn’t be using! use : instead.

Here’s your fixed script

.body{
background-image=url("http://www.ishafoundation.org/us/blog/wp-content/uploads/2015/06/sunrise-2.jpg");
}

Well, I think you now see the image at the background, but what about the size?

There’s a dubious property called, background-size !

ACQUIRE SOURCE!

So, How’d you size your thing up?
Well, It’s simple, give your background-size property 2 or 1 value…
Commonly,we give 2 values like this

.body{
background-image : url("http://www.ishafoundation.org/us/blog/wp-content/uploads/2015/06/sunrise-2.jpg");
background-size : 100px 100px ;
}

You can even do alot of other things like using special values like contain, cover… etc.

Learn more about this punk here - https://www.w3.org/TR/css3-background

and this person is the go-to for me