Aasan Solution: Write HTML code to set an image as background and display some text in any colour other than black.फोटो को बैकग्राउंड के रूप में सेट करने के लिए HTML कोड लिखें और काले रंग के अलावा किसी भी रंग में कुछ टेक्स्ट प्रदर्शित करें। (VMOU MSCCS/PGDCA/CAWD/MCA I Year - December 2018 Q9 Application software and web designing )

Friday 26 November 2021

Write HTML code to set an image as background and display some text in any colour other than black.फोटो को बैकग्राउंड के रूप में सेट करने के लिए HTML कोड लिखें और काले रंग के अलावा किसी भी रंग में कुछ टेक्स्ट प्रदर्शित करें। (VMOU MSCCS/PGDCA/CAWD/MCA I Year - December 2018 Q9 Application software and web designing )

Answer:

some text in any colour other than black.

<html>
<head>
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
<h2 style="color:Tomato;">Background Image Cover</h3>
<p style="color:DodgerBlue;">This is Blue color</p>
<p style="color:MediumSeaGreen;">this is shed of green </p>

</body>
</html>

Full Topic
Two method are used to add image as background

Using the Background attribute (Html Tag)
Using an Internal Style Sheet

1. Using Background Attribute
Syntax:-
<Body background="jpgfilename.extension">
If jpg image not stored in same directory of html file then we have to write full address of jpg filename.

<Html>
<Head>
<Title>
Add the Background image using background attribute
</Title>
</Head>
<Body background="C:\Users\d\Pictures\aasansolution.jpg">
This page helps us to understand how to show the backround image of a web page. <br>
</Body>
</Html>

2.Using an Internal Style Sheet
Syntax:-
<style >
body {
background-image : url('img_girl.jpg') ;
background-repeat : no-repeat ;
background-attachment : fixed ;
background-size : cover ;
}
</style >

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>

<h2>Background Cover</h2>

<p>Set the background-size property to "cover" and the background image will cover the entire element, in this case the body element.</p>

</body>
</html>

For text color we can write in body text like following

<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">This is Blue color</p>
<p style="color:MediumSeaGreen;">this is shed of green </p>

Aasan Solution

Friday 26 November 2021

No comments:

Post a Comment