Background and Borders

Question 1

What are backgrounds in web development?

Answer 1

Backgrounds are the areas behind the content of an element, which can be styled with colors, images, gradients, and more.

Question 2

How can you set a background color in CSS?

Answer 2

You can set a background color using the ‘background-color’ property.

Question 3

What is the purpose of borders in web development?

Answer 3

Borders are used to define the edges of an element and can enhance the visual structure of a webpage.

Question 4

How can you set a border in CSS?

Answer 4

You can set a border using the ‘border’ property, which can specify width, style, and color.

Question 5

What is a background image?

Answer 5

A background image is an image that is displayed behind the content of an element.

Question 6

How can you set a background image in CSS?

Answer 6

You can set a background image using the ‘background-image’ property.

Question 7

What is the ‘background-repeat’ property?

Answer 7

The ‘background-repeat’ property determines how a background image is repeated within an element.

Question 8

What does the ‘background-position’ property do?

Answer 8

The ‘background-position’ property specifies the position of a background image within an element.

Question 9

What is the ‘border-radius’ property?

Answer 9

The ‘border-radius’ property is used to create rounded corners for an element’s border.

Question 10

What CSS property is used to set the background color of an element?

Answer 10

The background-color property is used to define an element’s background color.
Example:

div {
  background-color: lightblue;
}

Question 11

How do you set an image as the background of an element?

Answer 11

Use the background-image property.
Example:

div {
  background-image: url('image.jpg');
}

Question 12

What values can the background-repeat property take?

Answer 12

• repeat (default) – Repeats the image both horizontally and vertically.
• no-repeat – Displays the image once, no repeating.
• repeat-x – Repeats horizontally.
• repeat-y – Repeats vertically.
• round – Adjusts image size to fit the element.
• space – Distributes the image evenly without cropping.

Question 13

How do you make a background image cover the entire element without stretching?

Answer 13

Use background-size: cover;

div {
  background-size: cover;
}

Ensures the image covers the element while maintaining its aspect ratio.

Question 14

What is the difference between background-size: contain; and background-size: cover;?

Answer 14

contain – Ensures the entire image is visible, but may leave empty space.

cover – Fills the entire element, but may crop parts of the image.

Question 15

How do you set a background image to be fixed while scrolling?

Answer 15

Use background-attachment: fixed;

div {
  background-attachment: fixed;
}

This makes the background stay in place while the content scrolls.

Question 16

How do you make a semi-transparent background color in CSS?

Answer 16

Use rgba() or opacity.
Example using rgba():

div {
  background-color: rgba(0, 0, 0, 0.5);
}

This sets a black background at 50% opacity.

Question 17

What are the different border styles available in CSS?

Answer 17

solid – A single solid line
dashed – A dashed line
dotted – A dotted line
double – Two solid lines
groove – A 3D grooved effect
ridge – A 3D ridged effect
inset – A 3D inset effect
outset – A 3D outset effect
none – No border

Question 18

How do you round the corners of a border?

Answer 18

Use border-radius.
Example:

div {
  border-radius: 10px;
}

This makes the corners rounded with a 10px radius.

Question 19

How do you create a circular element using border-radius?

Answer 19

Set border-radius to 50% and ensure the width and height are equal.

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

Question 20

What is the difference between border and outline?

Answer 20

border affects the element’s size and is part of the box model.

outline does not affect the size and does not take up space.

div {
  border: 2px solid black;
  outline: 3px dashed red;
}

Question 21

How do you create a border with different colors on each side?

Answer 21

Use border-top, border-right, border-bottom, and border-left.

div {
  border-top: 2px solid red;
  border-right: 2px solid blue;
  border-bottom: 2px solid green;
  border-left: 2px solid yellow;
}

Question 22

How do you apply multiple background images to an element?

Answer 22

Use a comma-separated list in background-image.

div {
  background-image: url('image1.png'), url('image2.png');
}

The first image is on top, and the second is underneath.

Question 23

How do you create a radial gradient background?

Answer 23

Use background: radial-gradient().

div {
  background: radial-gradient(circle, red, yellow, green);
}

Question 24

How do you add space between a border and the content inside an element?

Answer 24

Use padding.

div {
  border: 2px solid black;
  padding: 20px;
}

Question 25

How do you create a box with a shadow effect?

Answer 25

Use box-shadow.

div {
  box-shadow: 5px 5px 10px gray;
}

This adds a gray shadow to the bottom-right.