Css image


Learn How Can we Use Css Images an website or web pages??


Images Is The An Important Part of an website or web pages; without images we can't express and present our thinking and knowledge so we Must Learn About Css Images.


Css images

Link images in html 

<img src="put your image url" alt="Avatar" width="300px" height="175px">

Link images in css

background-image: url ('Example.jpg');


Background images

background css images apply on css, you should save images on folder where is your current coding file saved  then you can use only name of image.

.background {

 background-image: url ('Example.jpg');
(put your own url make sure image saved with coding file folder)

}

you can choose Height and width according to Your web page 


.background {

 background-image: url ('Example.jpg');
 width: 200px;
 height: 100px;
}


Fixed Your Background css images if you don't want scroll width content..


.background {

 background-image: url ('Example.jpg');
 background-attachment: fixed;

}

Stop repeat Your background css images

.background {

 background-image: url ('Example.jpg');
 background-repeat:no-repeat;
}


images title and description

Write something on your images as description or titles and create an additional impression of your web pages

In css

.des {
font-size:22px;
color:red;
text-align:center;
}

.title{
font-size:22px;
color:red;
t

In html

<div class="im"> 

<div class="title">Nainital</div>

<img src="nainital lake.jpg" alt="Avatar" class="image">

<div class="des">This is the pic of Nainital</div>
</div></div>

Result Of Above 

css images


Filter Css images 

change brightness, opacity and make other effect on your image; See example of below


css images

css images
We change opacity of image 1

.image 1 {

filter: opacity(50%);

}

We change image 2 in grayscale 

.image2 {

filter: grayscale(100%);

}

Now try another example yourself and see result example

 blur for image

.blur {

filter: blur(20px);

}

brightness for image

.brightness {

filter: brightness(10%);

}

Contrast for image

.contrast {

filter: contrast(50%);

}



Visit More