Create a style rule for the header element that fills the header background with tiled images...

Question

Question

Create a style rule for the header element that fills the header background with tiled images...

Create a style rule for the header element that fills the header background with tiled images of the back.png, but only over the element content.

Help me with HTML program and output

engineering Computer-Science

Add a comment Improve this question Transcribed image text

Answer 1

Answer #1

The answer to the question is given below.
The code of html file is given below.

<html>
<head>
<title>Make Your Title</title>
<style>
header
{
background-image:url(back.png);

background-repeat:repeat;

background-clip:content-box;

   padding:15px;

   border:10px solid black;

}
</style>
</head>
<body>
<header>
   Create a style rule for the header element that fills the header background with tiled images of the back.png, but only over the element content.<br/>
   Create a style rule for the header element that fills the header background with tiled images of the back.png, but only over the element content.<br/>
   Create a style rule for the header element that fills the header background with tiled images of the back.png, but only over the element content.<br/>
</header>
<div style="background-color:lightblue;">
<p>This is not header section</p>
<p>This is not header section</p>
<p>This is not header section</p>
<p>This is not header section</p>
<p>This is not header section</p>
</div>
</body>
</html>

Some Important Explanation related to code is given here.
For styling of header tag I have used some properties.
1. background-image: url(back.png)
This property sets the background in the header. You have to save the image in the same folder where you save this html file.

2.background-repeat:repeat;
This property is used to make background image tiled.

3. background-clip:content-box;
This property is usde to put background image only over the content in the header. This property's default value is border-box so we change it to content-box.

4. padding:15px;
I used this property just to clearly explain the background-clip property. You can remove it if you want.
This property makes the space between content and border .

5.border:10px solid black;
I used this property just to clear display of background-clip property. So only content have the backgound-image propert.
You can remove it if you want.

The screenshot of the code is given below.

The screenshot of the outuput is given below.

If the answer helped please upvote It means a lot. For any query please comment.

Add a comment

Answer 2

Create a style rule for the header element that fills the header background with tiled images...

Homework Answers

Add Answer to:
Create a style rule for the header element that fills the header background with tiled images...

Post as a guest

Earn Coins

Create a style rule for the header element that fills the header background with tiled images...

Homework Answers

Add Answer to: Create a style rule for the header element that fills the header background with tiled images...

Post as a guest

Earn Coins

Add Answer to:
Create a style rule for the header element that fills the header background with tiled images...